如何在 [class^="$variables"] 等 css 属性选择器中使用 sass 变量？ [复制]

Question

@mixin fullwidth($breakpoint,$grid-size)
{
    $varGridsize:col-#{$grid-size};
    @media only screen and (max-width: #{$breakpoint}px) { 
        [class ^="$varGridsize"]{width:100%;}
    }
}

我们如何在这个[class ^="$varGridsize"] 选择器中添加一个变量，它将它视为一个字符串并在css文件中返回一个字符串

[class^="$varGridsize"] {
    width: 100%;
}

Answer 1

只需将$varGridsize 包裹在#{} 中，例如：

@mixin fullwidth($breakpoint,$grid-size){
    $varGridsize:col-#{$grid-size};
    @media only screen and (max-width: #{$breakpoint}px){ 
       [class ^="#{$varGridsize}"]{width:100%;}
    }
}