在 Sass 中为 CSS 属性使用变量答案

【问题标题】：Using variables for CSS properties in Sass在 Sass 中为 CSS 属性使用变量
【发布时间】：2013-02-23 22:10:28
【问题描述】：

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

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

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

【问题讨论】：

标签： sass mixins

【解决方案1】：

您需要在变量上使用interpolation（例如#{$var}），以便 Sass 将其视为 CSS 属性。没有它，你只是在执行变量赋值。

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

【讨论】：

【解决方案2】：

除了@rcorbellini 回复

你可以同时使用字符串和变量

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

    margin-#{$direction}: 10px;

}

【讨论】：