Использование переменных для свойств CSS в Sass

Я пишу @mixin с некоторой математикой в нем, которая вычисляет процентную ширину элемента, но так как это очень полезно, я хотел бы использовать ту же функцию для других свойств, например, поля и paddings.

Есть ли способ передать имя свойства в качестве аргумента для mixin?

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

Ответ 1

Вам нужно использовать интерполяцию (например, #{$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;

}