在Sass中使用CSS属性的变量

Question

我正在编写一个带有一些数学的@mixin来计算元素的百分比宽度,但由于它非常有用,我想对其他属性也使用相同的函数,如边距和填充.

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

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

Answer 1

您需要对变量使用插值(例如#{$var}),以便Sass将其视为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;

}