SCSS 變量作為@extend 類

Question

我的想法是我想為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;
}

任何幫助，將不勝感激

Answer 1

嘗試使用變量插值

@extend #{$type};

有關SASS 參考的更多信息

Answer 2

雖然 Fabrizio 的回答在形式上是正確的，但請考慮不要那樣做。

任何類型的編程都有一個很好的規則：“保持簡單，愚蠢！” 又名親吻。

盡管 SASS 提供了諸如擴展和混合之類的高級工具，但這並不意味着您應該盡可能多地使用它們。 不需要時不要讓代碼變得復雜！

此代碼完全符合您的要求：將樣式應用於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/