SCSS变量为@extend类

时间:2013-07-09 10:45:02

标签: css sass

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

任何帮助将不胜感激

2 个答案:

答案 0 :(得分:16)

尝试使用变量插值

@extend #{$type};

有关SASS Reference

的更多信息

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

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