4

我想要一个返回 HTML5 输入类型列表的 mixin 函数。我想在一个地方管理这个，随着新类型的出现，改变函数，而不是代码中其他地方的所有地方。

问题似乎是 mixins 的设计初衷不是为了返回可以在 CSS 中的花括号之外使用的字符串。这是我的 mixin（当前返回错误）以及我如何使用它的示例：

/* 
 * Set all the up-and-coming input text types here for easier reference 
 * Does not include types that are not meant to be displayed full width, such as: 
        type=number, type=range, type=date, type=color
 */
@mixin input_text_types( $focus:false ) {
    @if $focus {
        @return #{input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus};
    } @else {
        @return #{input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel]};
    }
}

正在使用：

@include input_text_types() {
    width: 80%; 
}

我得到的错误就像error sass/style.scss (Line 134 of sass/_functions.scss: Invalid CSS after "...@return #{input": expected "}", was "[type=text]:foc...")

我尝试在使用和不使用@return指令的情况下格式化输出，并使用不同的方式将字符串值括起来（在引号中、在单引号中、在带有哈希的大括号中）。以前有人尝试过这样做吗？

4

2 回答 2

4

使用变量包含选择器可能会更好地解决您的问题。通过使用 mixin，您将失去将其与相似元素链接的能力。

$form-input-text: 'input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]';
$form-input-buttons: 'input[type="submit"], input[type="reset"], input[type="button"], button';
$form-input-dates: 'input[type^="date"], input[type="month"], input[type="week"], input[type="time"]';
$form-input-not-radio: 'input:not([type="radio"]):not([type="checkbox"])';

#{$form-input-text}, textarea {
    @include border-radius(.25em);
    border: $form-input-border;
}

#{$form-input-text}, textarea, input[type="file"] {
    width: $form-input-width;
    max-width: 100%;
    -webkit-appearance: textfield
}

#{$form-input-buttons} {
    padding: .25em .5em;
}
于 2013-06-28T17:46:17.740 回答
1

感谢 GitHub 上的 Chris Eppstein 和Twitter 上的@compass，他澄清了一个要点，即我混淆了函数与 mixin 的工作方式。使用该@content指令，我可以实现我想要的：

@mixin input_text_types( $focus:false ) {
    @if $focus {
      input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus {
        @content;
      }
    } @else {
        input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel] {
          @content;
        }
    }
}

它仍将以相同的方式与@include指令一起使用。

有关 和 之间细微差别的更多信息@mixin，@function请阅读纯 SASS 函数。

于 2013-06-28T17:16:33.387 回答