Codear CSS con superpoderes

Sass es un meta-lenguaje que nos permite llevar el estilado a otro nivel. ¿Pero qué tanto nos ofrece?

Indice

• ¿Qué es Sass y porqué aprenderlo?
• ¿Qué es un preprocesador CSS?
• ¿Qué beneficios tiene y cómo es su sintaxis?

¿Qué es SASS y porqué aprenderlo?

Syntactically Awesome Stylesheets es un meta-lenguaje de CSS que nos habilita diferentes herramientas para facilitar nuestro trabajo estilando.

Algunas de las ventajas que se pueden nombrar son:

• De entrada interpreta y respeta la sintaxis de CSS, por lo que no dificulta el estilar aunque no lo manipules al 100%.
• Es mucho más simple manejar la especificidad, cascada y herencia.
• La modularización de nuestro código se hace más fácil y reutilizable.
• Tiene una sintaxis más legible y similar a otros lenguajes tradicionales.

¿Qué es un preprocesador CSS?

Es un programa que nos permite generar CSS a partir de una sintaxis particular (este proceso se llama compilar), en este caso el metalenguaje en cuestión sería SASS, pero existen otros como Less y Stylus. La compilación se puede hacer por consola, o con otros programas que nos facilitan la tarea como Prepros, Koala, LiveReload, Ghostlab y Scout-app pero en esta otra story te explico cómo compilarlo de una forma más sencilla aún.

¿Qué herramientas tiene y cómo es la sintaxis?

Para enunciar tooodas las ventajas de Sass, está la documentación de ellos mismos, yo acá te voy a contar las que son, para mí, las más relevantes.

— Variables, Listas y Mapas

Esto es simple, tenemos las variables a las que se les puede asignar un valor (números, strings, colores, booleanos), las listas que serían como un arreglo de estas variables y los mapas que te permiten persistir pares de clave-valor. Todos con sus respectivos métodos como getLength(), getValue(), setValue(), setKey(index, key), entre otros. El qué se puede hacer con todo esto queda a imaginación tuya 😄.

Variable.

Lista.

Mapa.

— Nesting o anidamiento

Sass te permite anidar selectores escribiendo sólo una vez, evitando así uno repetirse, como puede verse en el ejemplo con nav. Esto resulta super práctico al momento de usar media queries porque te permite encapsular muy bien los diferentes escenarios. Por otra parte, también existe el Parent Selector (&) para referirse al selector de afuera. Esto suele ser muy similar, pero no confundirse, ya que el resultado es otro.

A la derecha ejemplo de Nesting.

Cómo vemos, el resultado cuando compila son nuevas clases, no un anidamiento de selectores. Muy práctico para pseudo-classes como hover.

—Mixins y Extend

Los mixins te permite definir estilos que pueden ser re-usados en cualquier parte de la hoja. Facilitan evitar el uso de clases no semánticas como .centered-content y distribuir colecciones de estilos en bibliotecas. A su vez, pueden recibir argumentos que podemos usar para condicionar el comportamiento.

Las declaramos con @mixin y las llamamos con @include.

Extend por otra parte, es algo así como ‘herencia’ de estilos. Nos permite reutilizar partes de nuestras reglas CSS y evitar tener que escribir el mismo código una y otra vez (esto con el Parent Selector (&) son una dupla muy útil en metodologías de nombrado como BEM).

Lo primero que piensa uno al leer esto es, ‘perate, ¿no estas diciendo maasomenos lo mismo que con mixins?’ Puede ser; pero la diferencia acá es cómo compila el código.

Te invito a que entres a este compilador online de SASS y veas la diferencia entre uno y otro.

@mixin error {
  border: 1px #f00;
  background-color: #fdd;
}
.error {
  border: 1px #f00;
  background-color: #fdd;
&--why-so {
    @include error;
  }
&--serious {
    @extend .error;   // Nótese que este lleva un punto (.)
    border-width: 3px;
  }
  
}

Es importante entender el enfoque de cada una de estas herramientas. Las dos nos permiten reutilizar código, pero son dos casos de usos distintos.

— Funciones, Bucles, Condicionales y debugging.

Las funciones de Sass tratan de traer un poco lo que es cotidiano en otros lenguajes. Poder mediante argumentos retornar un valor esperado. Esto resulta super ponente ya que podemos abstraer lógica de estilado en una función y no buscar mapear cada escenario existente.

Para esto, contamos con diferentes herramientas ya conocidas como son los bucles y los condicionales. No buscan reinventar la rueda, sino traernos la caja de herramientas que ya tenemos.

Contamos también con @if, @else, @while o @each (para listas).

Sumando a esto, para la instancia de ‘resolución de problemas’, en Sass contamos con la función debug que nos permite hacer un ‘console.log’ de nuestro código para poder ver y entender qué esta devolviendo en cada caso.

Debug te permite pasar mostrar cualquier tipo de variable, no es necesario forzarlo a que sea un string.

Para cerrar, ¿cuál es la diferencia entre las extensiones .scss y .sass?

La forma en que se escribe el código, su sintaxis.

Existen dos extensión para escribir Sass. La primera que es .sass sería como la expresión máxima de esta idea. Nos permite escribir sin siquiera aclarar llaves o puntos y coma. Por otra parte, la extensión .scss, nos permite mantener los beneficios de SASS pero con la vieja sintaxis del CSS.

Sin hacer muchas cuentas podemos asumir que, si uno se acostumbra, puede resultar mucho más rápido codear sin llaves ni puntos y comas. La cuestión acá es que al momento de compartir el código, el estándar es CSS y puede resultar chocante o engorrosa esta sintaxis.

Fun Fact: Sass se puede traducir al español como ‘Hablar con descaro’. Hace referencia a romper con el purismo del css y hacer un poco más coloquial el lenguaje.

Si te quedaste con alguna duda, o queres aprender más del tema, no dudes de entrar a la documentación de SASS o deja una pregunta abajo.

Gracias por llegar hasta acá.