Sass !Sistemas de diseño predeterminados y temáticos

Esta es una excelente publicación de blog de Brad Frost donde nos explica un ejemplo interesante. Digamos que estamos creando un tema y tenemos algo de Sass como este:

.c-text-input {  background-color: $form-background-color;  padding: 10px}

Si la $form-background-colorvariable no está definida, entonces no queremos que background-colorse muestre en nuestro CSS en absoluto. De hecho, queremos que nuestra salida se vea así:

.c-text-input {  padding: 10px;}

¿Ver? Ninguna background-colorpropiedad. Como muestra Brad, eso es posible hoy con la bandera de Sass !default. Puedes usarlo así mientras configuras la variable:

$form-background-color: null !default;.c-text-input {  background-color: $form-background-color; /* this line won’t exist in the outputted CSS file */  padding: 10px;}$form-background-color: red;.c-text-input-fancy {  background-color: $form-background-color; /* this line will be “red” because we defined the variable */  padding: 10px;}

Es algo realmente útil para recordar si quieres asegurarte de que tu CSS sea lo más pequeño posible mientras creas temas complejos con Sass.

Enlace directo →