如何在css屬性選擇器中使用sass變量，如[class^=「$ variables」]？

Question

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

我們如何能夠在這個[class ^="$varGridsize"]選擇ADDD一個變量是把它當作一個字符串，並返回在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%;} 
    } 
}