November 3, 2020 5 min to read

SASS

SASS: Tricks & Tips (or treat)

Holissss como andan??? A pocos días de haber pasado Halloween, el post de hoy va dedicado a SASS!! Algunos truquillos, magias oscuras y pequeños consejos que si no los conocías, te pueden ser muy útiles a la hora de trabajar con esta magiaaaaa

Interpolation

Para acceder a los valores usando interpolación:

    $white: #ffffff;

    /**
      Color Reference
      Walter is: #{$white}
    **/

Placeholders

Para poder extender y reutilizar ciertas reglas en nuestros selectores, podemos definir lo siguiente:

    %color-test-a {
        background-color: $prussian;
        color: $crimson;
    }

    %color-test-b {
        background-color: $coral;
        color: $perano;
    }

Una vez que definimos los placeholders, ya podemos extenderlos donde nos guste. Para eso, vamos a simular que tenemos un contenedor para aplicar el primer placeholder y una alteración del contenedor (modifier) para el segundo placeholder. Suponiendo para este ejemplo que las clases HTML son container y container–secondary. Veamos como nos queda!

    .container {
        @extend %color-test-a;

        &--secondary {
          @extend %color-test-b;
        }
    }

cuando compilemos, nos va a quedar este resultado (los colores a gusto de c/u, con fritas y ketchup estaría bien)

    .container {
        background-color: #B2CBF5;
        color: #F2CBF5;
    }

    .container--secondary {
        background-color: #D2CBF5;
        color: #G2CBF5;
    }

Si haces A/B testing, te puede servir tener este tipo de modificadores así armaditos! Nota: en mi caso utilizo NameThatColor para los nombres!

Sufijos

Si estás trabajando con BEM, capaz no te resulte nuevo pero una forma prolija y organizada de crear sufijos para nuestras clases es usando simplemente “&-“ o “&__” para armar algo asi:

    .container {
      &-pink {}
      &__wrapper {}
    }

compilado, estos selectores quedarían así:

    .container-pink {}
    .container__wrapper {}

Mixins

La vez pasada escribí bastante sobre mixins, asi que dejo un pequeño detalle para cuando queremos agregar un valor por defecto a nuestro mixin parametrizable:

    @mixin alert-text($color: #f33) {
        color: $color;
    }

De esta manera, siempre vamos a tener un color por defecto, para que cuando invoquemos al mixin, podamos tener la opción de mandarle por parámetro otro color, o no mandarle nada para que use el que definimos, así:

    @include alert-text();
    @include alert-text($black);

Nota: En el ejemplo vemos color de param, pero podemos pasar lo que definamos en cada mixin, size, margin, width, bla bla y dale que vaaaa

Null

Otra variante interesante hablando de parámetros por default, es cuando usamos null. Si lo aplicamos, el estilo directamente no se va a aplicar a menos que realmente lo necesitemos, está bueno para ahorrarnos reglas que no queremos que se compilen. Veamos!

    @mixin holis($opacity: null) {
        color: $white;
        opacity: $opacity;
    }

Cuando lo usamos con param:

    .container {
      @include holis(0.75);
    }

nos va a compilar:

    .container {
      color: #ffffff;
      opacity: 0.75;
    }

Ahoraaaa si no le pasamos naranja:

    .container {
      @include holis();
    }

nos va a compilar así:

    .container {
      color: #ffffff;
    }

Ta piolaaa no?

@debug

Bueeeeeeeeeeeno asi como los amantes JS tenemos y usamosssss console.log() Aca tenemos algo parecido! Algunas veces vamos a querer conocer el resultado de una función o simplemente el resultado de una expresión por ejemplo:

    @debug saturation(#e1d7d2);
    @debug saturation(#e1d7d2) > 50;

Nos va a mostrar respectivamente:

    20%
    false

Nota: Si querés ver otras funciones disponibles acá

Bonus: @for para clases propias

Si queres hacer algo mas zarpado como crear tus propias clases a lo bootstrap bien toppp VIP joyita, o si estás en algún proyecto de re-branding y además, usas clases atómicas, capaz te puede servir! Usando @for podes armar algo así (y más similares que encontrás en todos lados):

    @for $i from 1 through 10 {
       .p-b-#{$i * 5} {
           padding-bottom: #{$i * 5}unquote(px);
       }
    }

Eso te va a generar lo siguiente:

    .p-b-5 {
      padding-bottom: 5px;
    }
    .p-b-10 {
      padding-bottom: 10px;
    }
    .p-b-15 {
      padding-bottom: 15px;
    }
    .p-b-20 {
      padding-bottom: 20px;
    }

y la lista sigue.. (hasta llegar a 10 en este caso). Pero la idea es poder generar clases dinámicas con los valores que calculemos, no solo para paddings o margins sino para que lo que se te ocurra que pueda ser de utilidad en cada caso!

Happy cooooooding!!