SCSS变量作为@extend类 [英] SCSS Variables as @extend class

问题描述

我的想法是，我想为 input [type = text] ， input [type =password] / code>和 input [type = submit] 。然后，我将 @extend 他们在mixin中传递作为一个变量。

My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then @extend them in a mixin by passing hem through as a variable.

我的解析器抛出此错误;

My parser is throwing this error;

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

有关 SASS参考

这篇关于SCSS变量作为@extend类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！