SCSS mixin，如何連接單元？ （PX，％，EM）

Question

我想定義就像

.bg-1 { 
    width: 1% 
} 
.bg-2 { 
    width: 2% 
} 

類和我想這一點：

@for $i from 1 through 100 {  
    .bg-#{$i} { 
    width: #{$i}; 
    } 
} 

這至少編譯，但打印出

.bg-1 { 
     width: 1; 
    } 
    .bg-2 { 
     width: 2; 
    } 

問題是如果我加：

width: #{$i}%; 

我：

error sass/screen.scss (Line 294 of sass/modules/_classes.scss: Invalid CSS after " $var: ": expected expression (e.g. 1px, bold), was "%;") 

Answer 1

嘗試這種解決方案。有用。

@for $i from 1 through 100 {  
    .bg-#{$i} { 
    $percentage: unquote("%"); 
    width: #{$i}$percentage; 
    } 
} 

或者這樣：

@for $i from 1 through 100 {  
    .bg-#{$i} { 
    width: #{$i}unquote("%"); 
    } 
} 

Answer 2

或者這樣的事情，這是比較流行的。

@for $i from 1 through 100 {  
    .bg-#{$i} { 
    width: round(percentage($i/100)); // Math function 
    height: #{$i}px; // For px or em just concat 
    } 
}