css - sintaxis - Haciendo matemáticas en argumento variable Sass mixins

sass variable font family

Question

Me gusta usar las unidades rem con pixel fallbacks para el tamaño de mi CSS y estoy tratando de hacer mezclas para ayudar con eso. Para el tamaño de fuente, esto es fácil:

@mixin font-size($size) {
  font-size: $size + px;
  font-size: ($size / 10) + rem;
}

Pero para el relleno, el margen, etc. la mezcla debe aceptar argumentos variables, lo que es posible según la documentación de Sass http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

Sin embargo, con la siguiente combinación, en lugar de dividir por 10, la combinación solo agrega una barra entre los números. Eso es esto:

@mixin padding($padding...) {
    padding: $padding + px;
    padding: ($padding / 10) + rem;
}
.class {
    @include padding(24);
}

Produce esto:

.class {
    padding: 24px;
    padding: 24/10rem;
}

En lugar de esto, como es de esperar:

.class {
    padding: 24px;
    padding: 2.4rem;
}

¿Hay alguna manera de asegurarnos de que Sass reconozca las variables como números y, por lo tanto, utilice el operador de división en ellas correctamente?

Además, después de probar esto más, me di cuenta de que la concatenación solo tiene lugar en la última variable.

Answer 1

Parece que lo que realmente necesitaba usar aquí era una lista en lugar de un argumento variable para manipular cada valor por separado.

Primero intenté hacer esto con la directiva @each, pero no pude averiguar cómo usarla dentro de una declaración. Esto arroja un error:

@mixin padding($padding) {
   padding: @each $value in $padding { $value + px };
   padding: @each $value in $padding { ($value / 10) + rem };
}

Así que terminé escribiendo algo mucho más detallado que maneja cada uno de los cuatro casos posibles por separado (es decir, pasa 1, 2, 3 o 4 argumentos). Eso se ve así y funciona como yo quería:

@mixin padding($padding) {
    @if length($padding) == 1 {
        padding: $padding+px;
        padding: $padding/10+rem;
    }
    @if length($padding) == 2 {
        padding: nth($padding, 1)+px nth($padding, 2)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
    }
    @if length($padding) == 3 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
    }
    @if length($padding) == 4 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
    }
}

Hice una colección de mixins rem, incluido este como Gist aquí https://gist.github.com/doughamlin/7103259

Answer 2

Prueba esto:

padding: #{$padding / 10}rem;

La concatenación en SASS / SCSS utiliza la sintaxis de ruby, y estaba mezclando una ecuación matemática seguida de una concatenación, que es una mezcla de tipo variable, por lo que no me sorprende que no funcionara.

Las expresiones y variables incluidas en # {aquí} se evalúan como si estuvieran separadas del resto de la línea, y por lo tanto no se encasillan el resto de la línea. También es útil si su salida se cotiza cuando no esperaba (como lo hace la función unquote ())