SCSS mixin, как объединить единицы? (ПВ,%, эм)

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