SCSS变量作为@extend类

我的想法是，我想为

input[type=text]

、

input[type=“password”]

和

input[type=submit]

编写静默类。然后，我将通过将hem作为变量传递，在mixin中扩展它们

我的解析器抛出了这个错误

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;
}

---

任何帮助都将不胜感激

尝试使用变量插值

@extend #{$type};

---

关于

< P>的进一步信息，而法布里齐奥的回答是形式正确的，考虑不要这样。

在任何类型的编程中都有一条伟大的规则：“保持简单，愚蠢！”又名

尽管SASS提供了诸如extends和mixin之类的高级功能，但这并不意味着您应该尽可能多地使用它们。当你不需要的时候，不要让你的代码复杂化

此代码正是您想要的：将样式应用于

输入[…]

选择器：

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%);
    }
}

如果您想将样式应用于自定义类/IDS，请考虑此方法：

/////////////////
// 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;
}

---

演示：

它不再为此抛出错误，但现在是我尝试扩展的时候。我正在使用行

@extend-input（%text）出现的错误是“@extend input”：应为“}”，是“（%text）；”

您不能扩展mixin，只能扩展一个简单的选择器（类、id、元素等）。此外，在将选择器作为参数传递给mixin时，还需要引用它（例如，

@include input（“%foo”）

）。