Preprocesador CSS
SCSS, Less y Stylus a CSS

Qué hace un preprocesador CSS

Una hoja de estilos con anidamiento no es CSS válido. El navegador descarta la regla entera y no dice nada. Por lo tanto, este preprocesador CSS aplana el anidamiento, cambia las variables por sus valores y escribe el CSS plano que un navegador puede leer.

De un pegado vuelven tres cosas. Primero, el propio CSS compilado, listo para pegar en un archivo. Luego una lista de las variables y mixins que encontró, con el valor que guarda cada uno. Finalmente, un panel de notas que nombra todo lo que el compilador tuvo que decidir por su cuenta.

Ese último panel importa más de lo que parece. Una suposición silenciosa dentro del CSS compilado es un diseño roto dos pantallas después. Así que cada suposición se imprime junto a la salida en lugar de quedar enterrada en ella.

El conversor también funciona al revés. Porque un archivo plano es difícil de mantener ordenado, puede agrupar CSS normal de nuevo en SCSS o Less anidado, con los valores compartidos sacados como variables. No instalas nada y no envías nada.

Cómo compila un preprocesador a CSS

El trabajo se ejecuta en tres pasadas. Primero, el lector convierte el origen en una lista de reglas, cada una con un selector, un bloque y una profundidad. Luego una segunda pasada une los selectores anidados con sus padres. Finalmente un escritor imprime las reglas planas en orden.

Unir selectores sigue las reglas de selectores que usa el propio navegador. Una regla anidada una vez se convierte en un selector descendiente. Una regla escrita con ampersand mantiene su padre unido, que es como se construyen un estado hover y una clase modificadora.

Las variables son el segundo trabajo. Porque SCSS y Less permiten que un nombre represente un valor, el compilador busca cada nombre que encuentra y escribe el valor en su lugar. Las variables de Sass empiezan por signo de dólar, y las de Less por arroba, así que el lector las distingue por el primer carácter.

El escritor nunca toca una API del navegador ni toca la red. Así que la página funciona sin conexión. También funciona con un archivo que preferirías no pegar en un compilador alojado, como una hoja de estilos que nombra un producto sin anunciar.

SCSS, Less y Stylus lado a lado

Los tres lenguajes coinciden en la idea y difieren en la puntuación. Así que el compilador lee los tres y escribe una sola salida.

SCSS conserva las llaves y los puntos y coma de CSS, y por eso se siente como CSS con funciones extra. Less hace lo mismo, y además permite una llamada parcial a un mixin sin paréntesis. Stylus quita las llaves, los puntos y coma y a menudo los dos puntos, y se apoya en la indentación.

Porque las diferencias son pequeñas, una página puede leer los tres. El lector decide qué lenguaje tiene delante mirando el archivo: un signo de dólar apunta a SCSS, una arroba delante de un nombre apunta a Less, y una llave ausente apunta a Stylus. Cuando el origen es ambiguo, la página lo dice en el panel de notas en lugar de adivinar.

La salida es la misma en todos los casos. Así que el navegador ve una sola hoja de estilos plana, y tú mantienes el origen en el lenguaje que tu equipo ya usa.

Por qué unir selectores es la parte difícil

Un compilador que pega los dos selectores con un espacio se equivoca en casi todo el anidamiento. Porque una regla anidada bajo un padre se convierte en descendiente solo cuando no hay ampersand, el lector sigue la pista del padre en cada nivel mientras baja.

Así que cada bloque guarda el selector completo que va a imprimir. Una regla arriba del todo empieza con su propio selector. Luego una regla dentro de ella hereda ese y añade el suyo, separados por un espacio. Un ampersand reemplaza el espacio por completo, y así el estado hover de un padre se une sin hueco.

El orden de las reglas impresas es el tercer caso. Porque una regla posterior de igual peso gana, el escritor conserva el orden del origen en cada nivel. De esta forma la cascada sobrevive la compilación, y una regla que querías que ganara sigue ganando.

Qué compila limpio y qué recibe una nota

Un compilador se gana la confianza nombrando sus propios límites. Por lo tanto, el panel de notas enumera cada construcción que el lector resolvió de una forma que deberías revisar.

Las definiciones e inclusiones de mixins compilan, porque los dos lenguajes las definen en el origen que pegaste. Las expresiones de guarda de Less compilan cuando la condición es una comparación simple. Así que un mixin con guarda inserta la rama que coincide.

La interpolación recibe una nota más a menudo. Porque un valor construido a partir de una variable dentro de una cadena necesita el valor en tiempo de compilación, el lector solo puede resolverlo cuando la variable está en el mismo archivo. Un valor que viene de un import que la página no tiene se queda como está escrito, y la nota dice qué nombre faltaba.

Los propios imports también reciben una nota. La página no puede traer otro archivo, ya que nunca toca la red. Así que un at-import se queda en la salida como un import de CSS normal, y el panel dice que el archivo no se leyó. Eso mantiene la salida honesta en lugar de silenciosamente equivocada.

El recuento junto a la salida forma parte de la misma idea. Porque una compilación puede cambiar el tamaño de un archivo en cualquier dirección, el panel informa de las reglas escritas, las declaraciones que contienen, y el tamaño de la entrada y de la salida. Así que una hoja de estilos que creció tras compilar se ve de un vistazo y no después de un despliegue.