在Sass中使用CSS属性的变量

Question

我正在写一个@mixin，里面有一些数学计算元素的百分比宽度，但由于它非常有用，我想为其他属性使用相同的函数，比如利润和填充。

有没有办法将属性名称作为参数传递给mixin？

@mixin w_fluid($property_name, $w_element,$w_parent:16) { 
    $property_name: percentage(($w_element/$w_parent)); 
} 

Answer 1

您需要在您的变量使用interpolation（如：#{$var}），以便萨斯把它当作一个CSS属性。没有它，你只是在执行变量赋值。

@mixin w_fluid($property_name, $w_element, $w_parent:16) { 
    #{$property_name}: percentage(($w_element/$w_parent)); 
} 

Answer 2

除了@rcorbellini响应

您可以使用字符串和可变一起

@mixin margin($direction) { // element spacing 

    margin-#{$direction}: 10px; 

}