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参考的更多信息