我的想法是,我想为input[type=text]
,input[type="password"]
和input[type=submit]
编写无声课程。然后我会通过将下摆作为变量传递给@extend
他们。
我的解析器抛出此错误;
Syntax error: Invalid CSS after " @extend ": expected selector_sequence, was "$type;"
这是我的代码;
%text {
(text styling)
}
%password {
@extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
@include transition;
background-color: darken($button-color, 10%);
}
}
@mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
@extend $type;
}
任何帮助将不胜感激
答案 0 :(得分:16)
答案 1 :(得分:2)
虽然法布里奇奥的回答是正式的,但请考虑不要这样做。
任何类型的编程都有一个很好的规则:“保持简单,愚蠢!”又名KISS。
虽然SASS提供了诸如extends和mixins之类的高级设施,但这并不意味着你应该尽可能地使用它们。当你不需要时,不要让你的代码变得复杂!
此代码完全符合您的要求:将样式应用于input[...]
选择器:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
@include transition;
background-color: darken($button-color, 10%);
}
}
如果要将样式应用于自定义类/ ID,请考虑以下方法:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
@extend %input;
font-family: Verdana;
}
%password {
@extend %text;
}
%submit {
@extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
@include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
@extend %text;
}
.password {
@extend %password;
}
#the-submit-button {
@extend %submit;
}