tutorial - Usando variables para las propiedades CSS en Sass

tutorial sass

Question

Estoy escribiendo un @mixin con algunas matemáticas que calculan el porcentaje de ancho de un elemento, pero como es muy útil, me gustaría usar la misma función para otras propiedades, como márgenes y rellenos.

¿Hay una manera de pasar el nombre de la propiedad como un argumento a un mixin?

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

Answer 1

Además de la respuesta @rcorbellini

Puedes usar cadena y variable juntas

@mixin margin($direction) { // element spacing
margin-#{$direction}: 10px;
}

Answer 2

interpolation usar la interpolation (por ejemplo, #{$var} ) en su variable para que Sass la trate como una propiedad CSS. Sin eso, solo estás realizando una asignación variable.

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