Parece que estoy intentando usar las propiedades de SASS como argumentos para mi función, Y NO ESTÁ FUNCIONANDO BIEN .
¿Hay alguna manera en que pueda hacer esto, o hay una mejor alternativa a lo que estoy tratando de lograr?
Básicamente, quiero cambiar los valores de las variables que envío a mi función en función de mi consulta de medios de ancho de pantalla.
Corrientemente:
@function myFunc($arg1, $arg2) { @debug "arg1 = #{$arg1} / arg2 = #{$arg2}"; @return #{$arg1} * #{$arg2}; } .my-class { // Mobile first values --var1: 10px; --var2: 20px; @media (--from-tablet-size) { --var1: 20px; --var2: 40px; } width: myFunc(--var1, ---var2); } La salida de depuración en realidad muestra que los valores pasados a la función son solo las cadenas --var1 y --var2 en lugar de sus respectivos valores de propiedad...
DEBUG: arg1 = --var1 / arg2 = --var2¿Hay algo que pueda hacer para solucionar esto? ¿Pasando las propiedades como intento aquí, o una mejor alternativa?
Hay algunos problemas con su código:
var() , por ejemplo var(--var1) . Más información: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties10px * 20px ? Debería ser algo así como 10 * 20px .Primera sugerencia: usar variables SASS
@function myFunc($arg1, $arg2) { @debug "arg1 = #{$arg1} / arg2 = #{$arg2}"; @return $arg1 * $arg2; } .my-class { // Mobile first values $var1: 10; $var2: 20px; width: myFunc($var1, -$var2); @media (--from-tablet-size) { $var1: 20; $var2: 40px; width: myFunc($var1, -$var2); } }Segunda sugerencia: usar variables CSS
.my-class { // Mobile first values --var1: 10; --var2: 20px; @media (--from-tablet-size) { --var1: 20; --var2: 40px; } width: calc(var(--var1) * -1 * var(--var2)); }