Использование переменных для свойств 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;
}