Lo esencial de Stylus preprocesador CSS

Amo Stylus y hoy en lo esencial de stylus preprocesador CSS les mostraré por qué mi amor.

Esta es la tercer entrega de “lo esencial” aquí puedes ver lo escrito sobre lo esencial de less y sobre lo esencial de sass.

Stylus ha mejorado en cuanto a su satisfacción y esta encima de Less, sin embargo PostCSS es el rey.

las recomendaciones básicas son las mismas:

  • Escribe CSS modular (un archivo que contenga -incluya- a los demás y archivos independientes según la necesidad)
  • Escribe con el paradigma de BEM 
  • Asegúrate de establecer el orden de carga para evitar errores no deseados
  • Puedes usar la terminal o una interfaz gráfica como prepros.

Sintaxis

Olvídate de las “llaves” -{ }- y del “punto y coma” – ; –  y no necesita tampoco los dos puntos – : – Stylus es muy parecido a escribir javascript y esa es una de las razones por las que me gusta mucho este preprocesador. Efectivamente Sass en con su extensión de archivos “archivo.sass” es muy similar. Pero en mi caso lo descubrí primero en Stylus.

Variables

A estas alturas si ya pasaste por los otros dos capítulos de “lo esencial” sabrás que puedes escribir de forma nativa variables en CSS. Pero que entre los superpoderes que te dan los preprocesadores están las variables.

Las declaras así:

Sintaxis Stylus

Operadores

Puede que si estás comenzando con CSS no le encuentras mucho sentido a los operadores. Pero

¿Qué si la diseñadora/ el diseñador decide reducir en un 5% los colores. Sí, aparte de que puedes modificar tus variables y todo tú código se verá mejor, podrás también utilizar operaciones para afectar el tono del color.

O ¿Qué si las columnas son irregulares? son por porcentaje que depende de otros factores.

Operadores Stylus

Nesting o anidación

La anidación es una forma de escribir meno código, todos debemos aprender a usar las anidaciones.

No olvides tener cuidado con la indentación y usar “ & ” para invocar al selector padre.

Nesting Stylus

** Intencionalmente he roto la regla para apreciar el funcionamiento de la anidación. Más que una regla debe ser una forma de mantener lo más claro el CSS.

Funciones

De nuevo, la intención es dar superpoderes al CSS. Reducir la escritura del CSS y hacerlo más fluido.

Entre lo esencial de Stylus como preprocesador de CSS no podían faltar las funciones.

Funciones Stylus

Mixin

Escribir menos, escribir de forma más inteligente, escribir para “reutilizar”. Eso es escribir mixin.

Mixin Stylus

En resumen: 

Espero que hayas disfrutado las 3 entregas de “lo esencial” de cada uno de los preprocesadores. ¿Hay más? mucho más puedes buscar más información en los sitios oficiales de cada uno.

Pronto tendré una cuarta entrega de “lo esencial” pero será de Pug como preprocesador de HTML y generador de plantillas.