我想要一个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]};
}
}
使用中:
@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
指令格式化输出,并使用不同的方式将包含字符串值(在引号中,在单引号中,在带有哈希的花括号中)。以前有人试过这样的事吗?
答案 0 :(得分: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;
}
答案 1 :(得分:1)
感谢GitHub上的Chris Eppstein和推特上的@compass,他清理了with a gist,我觉得混淆功能的方式与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
之间细微差异的详情,请阅读Pure SASS Functions。