Lo esencial de Sass preprocesador CSS

Sass es muy poderoso como preprocesador en esta segunda entrega hablaremos de lo esencial de Sass preprocesador CSS. Aquí puedes ver lo esencial de Less y aquí podrás ver lo esencial de Stylus. 

Aunque ha decrecido en cuanto a satisfacción sigue siendo el preprocesador de mayor demanda en el mercado.

Bootstrap usa Sass en sus hojas de estilo, así que definitivamente vale la pena conocerlo y dominarlo.

De nuevo, siempre fíate de la documentación oficial y no olvides que puedes “compilar” Sass desde la terminal o bien por medio de opciones gráficas como Prepros.

A la vez te recuerdo que lo ideal es que uses BEM para escribir tu CSS.

Idealmente deberías escribir todo por “módulos” -un archivo para las variables, configuraciones y mixin, otro para el head, otro para el footer, otros para “x” y otro para “z” – y usar un archivo principal que sea el único que se compile que que genere nuestro documento CSS.

Sintaxis

Se escribe exactamente como escribirias CSS en cualquier hoja de estilo, su extensión es: .scss

Pero si escribes en sass estilos.sass  puedes escribir sin llaves y sin punto y coma – no olvides ser cuidadosa/o con la indentación

Escribes:

Resultado:

¡Maravilloso

Y aunque existen dos “extensiones” oficiales para los archivos de sass aquí en lo esencial de sass únicamente utilizaré .sass

Variables

Todos los archivos que no vamos a compilar deben comenzar por el “undescore” o “guión bajo” y así que nuestro archivo de variables deberá llamarse “_variables.sass”. Puedes escribir y citar de la siguiente forma:

Operadores

Entre lo esencial de Sass podemos encontrar operaciones aritméticas. Veámos cómo funcionan:

El resultado es:

Funciones 

También tenemos funciones, vital para ayudarnos a escribir código. Tenemos funciones sin parámetros (con valores definidos) o paramétricas (con valores por definir) veamos tanto su escritura como su compilación:

Luego de compilado:

Anidación 

Esfuérzate mucho por mantener la regla de 3 niveles en la anidación. Aquí puedes ver cómo escribir las anidaciones o “Nesting”

El resultado es:

 

Mixin

¿Hay muchas cajas similares? ¿en más de una página? no es necesario escribir una y otra vez el mismo código. La solución: Los Mixin

Debes tener presente que para invocarlos debes hacerlo por medio de @include nombre-mixin

Resultado en CSS

En resumen: 

Conforme nuestro CSS va creciendo y nuestros proyectos se hacen grandes será necesario archivos para botones o bien para crear nuestra propia grilla, por lo mismo es indispensable ser cuidadoso a la hora de asignar un orden a los archivos a compilar puesto que podríamos tener errores no deseados.

Si quieres saber más de Sass puedes aprender aquí.