SCSS变量作为@extend类的使用方法

Question

我的想法是我想要为input[type=text]、input[type="password"]和input[type=submit]编写静默类。然后，我将通过将它们作为变量传递来在mixin中@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;
}

任何帮助都将不胜感激

- Kevin Lewis

Answer 1

尝试使用变量插值

@extend #{$type};

有关 SASS参考 的更多信息。

- Fabrizio Calderan

---

现在它不再为此抛出错误，但是当我尝试扩展时出现问题。我正在使用这行代码@extend input(%text);，报错信息是"@extend input"之后的CSS无效：预期为"}"，而不是"(％text);"。 - Kevin Lewis

你不能扩展一个mixin，只能扩展简单选择器（类、ID、元素等）。此外，在将选择器作为mixin参数传递时，需要将其引用起来（例如：@include input('%foo')）。 - cimmanon

Answer 2

虽然Fabrizio的回答在形式上是正确的，但考虑不要这样做。

在任何编程中都有一个伟大的规则：“保持简单，傻瓜！”也就是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;
}

演示：http://sassbin.com/gist/5956909/

- Andrey Mikhaylov - lolmaus