Sass
Primero que todo hay que saber que Sass ( Syntactically Awesome StyleSheets ) es un preprocesador de CSS. Pero, ¿qué significa esto?.
Los preprocesadores CSS son herramientas para los desarrolladores de sitios web, que permiten traducir un código de hojas de estilo no estándar, en este caso Sass, a un código CSS estándar, entendible por los navegadores.
La mayoría de preprocesadores CSS añadirán algunas características que no existen en CSS puro, como variables, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.
Algunas de las ventajas de usar estos preprocesadores es que nos ahorra tiempo, podemos tener un código más organizado y gracias a esto podemos editar ciertos valores que afecten decenas de líneas de código.
Sass tiene dos sintaxis:
- SCSS ( Sassy CSS ): La sintaxis es similar a CSS .
- Sass (Sass original): Su sintaxis es similar a Ruby .
Ambos son parte del pre-procesador Sass y pueden importase entre si.
Nosotros usaremos SCSS y a continuación aprenderemos algunas cosas sobre su sintaxis:
Variables
Las variables en SCSS nos permiten asignar a un identificador de nuestra elección un valor específico.
¿Por qué es eso útil? A diferencia de CSS, si se necesita modificar un valor, solo tendremos que actualizarlo en un lugar y el cambio se reflejará en donde hayamos usado la variable con el valor asignado.
En Sass, “$” se usa para definir y referenciar una variable:
Una vez compilado el código anterior, obtendrías un código estándar como el siguiente:
Nota: La mayor parte de las veces es mejor que el nombre de las variables no hagan referencia al valor de las mismas sino, por ejemplo, a donde se aplican.
Anidación (Nesting)
SCSS permite anidar las reglas CSS para que las hojas de estilos sean más concisas y fáciles de escribir. Con anidación en CSS tendrás que escribir menos, pues tendremos selectores que son menos largos y menos repetitivos.
Pongamos un ejemplo con el siguiente código HTML:
Para agregar estilos al código anterior con CSS tendríamos que hacer algo como esto:
A continuación veamos un código donde anidamos los selectores. Esa anidación es similar a la que tenemos en el HTML, donde unas etiquetas están dentro de otras.
Referencia al selector padre
A la hora de producir código anidado en SCSS hay otra técnica que se usa bastante, que es la referencia al selector padre, usando el caracter “&”.
En SCSS, el caracter “&” se utiliza para especificar exactamente dónde se debe insertar un selector principal. También ayuda a escribir pseudo clases de una manera mucho menos repetitiva. Por ejemplo:
Otro uso de este operador para referirse al selector padre es cuando estás usando una nomenclatura como “BEM”. Supongamos que tenemos un código HTML como el siguiente:
Para poder definir todos los estilos de la clase “container” de una vez y usando anidación, podríamos escribir algo como esto.
Y compilaría de la siguiente manera:
Propiedades Anidadas
En SCSS, la anidación no está limitada solo a los selectores. También se puede anidar las propiedades CSS comunes si agrega un sufijo de dos puntos después del nombre de la propiedad.
Y compilaría de la siguiente manera:
Estos son algunos de las cosas que podemos hacer haciendo uso del pre-procesador Sass.
Aprende más sobre Sass y la mejor forma de iniciarte en HTML y CSS visitando la página de MUKTEK
