Si trabajas con CSS, tienes que conocer el preprocesador Sass
Seguramente hayáis leído el título de manera rápida y quizás hayáis visto un «SaaS» y solo para aclararlo: no hablaremos de nada relacionado con el Software as a Service, que se corresponde con el acrónonimo SaaS que tanto utilizamos al hablar de Cloud Computing. Si trabajáis con hojas de estilo CSS de manera fluida, os sonará Sass (con dos eses), un preprocesador CSS que destaca por los tipos de sintaxis que trae. Su nombre se corresponde con Syntactically Awesome Style Sheets, que podríamos traducir como Hojas de Estilo Sintácticamente Alucinantes, y supone toda una declaración de intenciones. En este artículo, os explicamos qué son los preprocesadores CSS y qué tiene de especial Sass para ser el más utilizado actualmente.
¿Qué son los preprocesadores CSS?
Podríamos definir los preprocesadores CSS como herramientas que posibilitan traducir hojas de estilo comunes a un código estándar y reconocible por los navegadores web. Estas herramientas disponen de utilidades que no están en el lenguaje CSS y, por tanto, no las interpretan los navegadores directamente, como pueden ser variables, anidación de selectores, funciones (mixins), etc. Creando un preprocesador lo que conseguimos es economizar tiempo, ya que escribimos menos código. Además, su mantenimiento es fácil y resulta más comprensible, debido básicamente a su optimizada organización.
Por el contrario, crear un preprocesador implica aprender un nuevo lenguaje y escribir código poco común, que debe ser compilado en CSS y que afecta al flujo de desarrollo. Este código, que no entiende el navegador, deberemos traducirlo antes de llevar un sitio web a producción. Por suerte para nosotros, existen alternativas para su optimización y traducción que harán que ahorremos tiempo.
¿Por qué Sass?
Podríamos escoger otros preprocesadores, como Less o Stylus, ya que todos al final ofrecen las mismas utilidades, pero Sass es el preprocesador más utilizado y demandado por la comunidad de desarrolladores. Varios frameworks como Bootstrap lo utilizan y, además, cabe la posibilidad de que podamos heredar proyectos que lo usen, siendo de enorme beneficio aprender este preprocesador.
¿Cómo es la sintaxis de Sass?
Para aprender Sass podríamos hablar de dos partes principales. En la primera, aprenderíamos a trabajar con su código y su sintaxis, y en la segunda, lo aplicaríamos a nuestro flujo de trabajo.
Los dos tipos de sintaxis para escribir el código de Sass son los siguientes:
- Sintaxis Sass. Es algo diferente a como sería la de CSS estándar. No tiene muchas diferencias, pero por ejemplo, no tenemos que poner los puntos y comas al final de los valores de propiedades, no se usan las llaves y en su lugar se realizan indentados, etc.
- Sintaxis SCSS. Esta es una sintaxis muy próxima a la sintaxis del propio CSS. De hecho, CSS es código SCSS válido, aunque con algunos elementos extra.
Alejarse del lenguaje CSS y tener que aprender uno nuevo, aunque pueda resultar más rápido escribir con sintaxis Sass, es menos recomendable. Pero si usamos SCSS, tenemos la ventaja de utilizar el código CSS de siempre, totalmente válido para el preprocesador y además, podremos utilizar, tanto los conocimientos que ya teníamos, como posibles códigos de estilo de los cuales ya disponíamos de otros proyectos.
Como creemos que estar más cerca del lenguaje CSS será más entendible por todos, utilizaremos las sintaxis SCSS.
Vamos a ver un ejemplo de uso de variables sobre la sintaxis de Sass.
$color-fondos: #F55;
h1 {
background-color: $color-fondos;
}
Observamos cómo declaramos una variable para luego usarla en un selector. Lógicamente, no se podría usar en CSS porque estas declaraciones no existen.
Recordemos que CSS ya incorpora variables, aunque se usa otra sintaxis. La desventaja es que no todos los navegadores lo interpretan, a no ser que se implemente PostCSS con CSS Next.
El resultado, cuando compilemos el código anterior, sería el siguiente código estándar:
h1 {
background-color: #F55; }
En próximos artículos, explicaremos cómo usar Sass en detalle y cómo instalarlo.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.