我想要一个 mixin 函数,它返回 HTML5 输入类型的列表。我想在一个地方管理它,当新类型出现时,改变函数,而不是代码中其他地方的所有地方。
问题似乎是 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]};
}
}
In use:
@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
指令,并用我见过的不同方式将字符串值括起来(用引号、单引号、用散列括起来的花括号)。以前有人尝试过做这样的事情吗?