在Sass中使用变量作为CSS属性

Question

我正在编写一个@mixin，其中包含一些数学计算，用于计算元素的百分比宽度，但由于它非常有用，我希望还可以将相同的函数用于其他属性，如边距和填充。

是否有一种方法可以将属性名称作为参数传递给mixin？

我正在编写一个@mixin，其中包含一些数学计算，用于计算元素的百分比宽度，但由于它非常有用，我希望还可以将相同的函数用于其他属性，如边距和填充。

是否有一种方法可以将属性名称作为参数传递给mixin？

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

- Laura Silvani

Answer 1

你需要在变量中使用插值（例如#{$var}），这样Sass才能将其视为CSS属性。如果没有插值，你只是进行了变量赋值。

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

- rcorbellini

---

谢谢rcorbellini，我在声明块中引用属性名称的方式不正确。正确的方式是：#{$property_name}。感谢！ - Laura Silvani

Answer 2

除了@rcorbellini的回复之外，您还可以将字符串和变量组合使用

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

    margin-#{$direction}: 10px;

}

- Julha