¿Alguna vez has sentido que escribes demasiado código CSS? Pues estás de suerte, porque con sass te vas a ahorrar mucho código. Sass lo que hace es compilar lo que escribes a código css que pueda entender el navegador.
Es cierto que cada vez están implementando nuevas funcionalidades a css, pero antiguamente no tenía tantas y LESS y posteriormente SASS vinieron para resolver este problema. Incluso en los tiempos que corren SASS sigue siendo una buena ida para usar junto a cualquier framework.
¿Qué es SASS?
SASS es un preprocesador de código CSS, es decir, todo lo que escribas acabará siendo código CSS, ya que es lo que los nevagadores pueden entender. Lo bueno de SASS es que puedes extender el código CSS para hacerlo más reutilizable y dinámico, en otras palabras, con SASS agilizas el desarrollo y consigues escribir menos código CSS ¿mola no?
SASS utiliza sus propios ficheros, y en ese caso tiene dos vertientes:
- Ficheros .sass: En estos ficheros no necesitas escribir llaves ni punto y coma al final. Si has utilizado alguna vez Stylus, Python o alguno de esos lenguajes te vas a sentir más cómodo con estos archivos.
- Ficheros .scss: En esta vertiente si que puedes escribir llaves y puntos y coma al final, por lo tanto puedes escribir código CSS dentro de estos ficheros como hacías hasta ahora.
¿Por dónde empezar? ¿Cómo puedo instalar SASS?
Para usar SASS necesitas un compilador que transforme tus ficheros .scss o .sass en archivos .css cotidianos.
Lo más fácil es instalar SASS mediante su paquete global de NPM. Si no usas NPM te recomiendo que le eches un vistazo a mi tutorial sobre NPM.
npm install -g sassTambién puedes instalar sass mediante su gema de ruby:
gem install sassLa manera más sencilla de usar SASS es la siguiente:
sass input.scss output.cssSimplemente cogerá lo que haya en el fichero input y lo compilará en el fichero css output. Hay un parámetro para sass que hace que automáticamente se compilen los archivos sass en archivos css cuando detecta un cambio:
sass --watch input.scss output.cssTutorial de sass. Aprende a utilizarlo.
Muy bien, ahora que ya sabes cómo instalar sass y cómo usar su compilador, vamos a ver lo realmente importante, cómo usar sass y qué puede ofrecer.
A partir de aquí yo voy a optar por usar ficheros .scss. Si estás usando ficheros .sass lo que vas a aprender se aplica también solo que sin llaves y puntos y coma al final.
Cómo crear variables scss
Esto fue una de las primeras cosas que más me gustarón de sass, la posibilidad de añadir variables para poder reutilizarse en los estilos. Esto era muy útil hace un tiempo, pero recientemente, han implementado variables también en css, te dejo un artículo por si no lo sabías:
https://www.w3schools.com/css/css3_variables.asp
Crear variables en scss es tan fácil como hacer así:
$primary-color: #333;Listo, ya puedes usar esa variable donde quieras, por ejemplo:
$primary-color: #333;
.navbar {
background-color: $primary-color;
}
.footer {
border: 1px solid $primary-color;
}Sass va a leer las variables y las va a sustituir por su respectivo valor para crear el archivo .css. Esto de las variables viene genial cuando quieres mantener una consistencia en el aspecto de la web que estás desarrollando. Una práctica muy habitual consiste en definir todos los colores de la aplicación en forma de variables sass para tenerlos bien localizados.
Aparte de poder poner colores puedes poner cualquier propiedad css que se te ocurra (distancias en píxeles, transiciones, números, etc)
Nesting de variables. Anidación de estilos
Otra característica fundamental de sass es el nesting de variables, es decir, poder anidar propiedades unas dentro de otras ahorrando código. Veamos un ejemplo:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}El código que ves arriba, al compilarse en código css dará como resultado:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}En este caso no te ahorras, muchas líneas, pero cuando tienes muchas anidaciones si que puede llegar a ser útil. Además si por ejemplo quieres quitar el selector del nav y quieres poner una clase, por ejemplo, te va a resultar mucho más fácil cambiarlo en un solo sitio.
Otra ventaja es que puedes hacer anidaciones unas dentro de otras, por ejemplo:
nav {
.container {
margin: 0;
padding: 0;
list-style: none;
ul {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
}Además, si pones & también puedes hacer nesting de propiedades del selector en el que lo apliques como por ejemplo:
a {
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}En este caso accedes al selector padre, es decir la etiqueta a en el estado hover
Que será compilado a:
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Como ves, con & referencias al objeto sobre el que lo aplicas.
Importación de estilos
Como sabrás, CSS también tiene una manera de importar ficheros css unos dentro de otros, y sass hace lo mismo, la diferencia es que con el import de sass no se generan nuevas peticiones HTTP. Cada vez que importes un fichero, sass va a coger el contenido del fichero importado y lo va a combinar con el otro fichero:
@import "base";
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}Así de sencillo se importan ficheros con sass. Con esto vas a poder modulizar mucho el código de tus aplicaciones web. Puedes combiar esta importación de ficheros con las variables vistas anteriormente para tener un fichero localizado con todas las variables de la aplicación.
Mixins
Los mixins ahorran mucho código, también sirven para reutilizar partes de código. Son como una especie de pequeñas funciones que devuleven código css, y además puedes meter parámetros a estas funciones para que se puedan personalizar para caso de uso, por ejemplo:
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box {
@include transform(rotate(30deg));
}En este caso el mixin recibe un parámetro llamado property que indica la cantidad de rotación a aplicar. A continuación se llama a la función con el @include indicando el nombre de la función y pasando el parámetro. En este caso nos evita tener que escribir las propiedades para los distintos navegadores cada vez que queramos hacer una transformación
Bucles for
Sass también añade bucles for, por ejemplo si quieres añadir propiedades css a objetos que tienen un nombre parecido, puedes usar un bucle for para esta tarea:
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}Compilado a:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}Operadores
Por último me gustaría echar un vistazo a los operadores, una funcionalidad indispensable en cualquier lenguaje de programación y que nos pueden venir muy bien para escribir código css:
.container {
width: 100%;
}
article {
float: left;
width: 600px / 960px * 100%;
}
aside {
float: right;
width: 300px / 960px * 100%;
}No hace falta ni explicar que hace el código de arriba, es tan sencillo de usar que es incluso natural. Los operadores que tienes disponibles son:
+: Para sumar cantidades-: Para restar números*: Para multiplicar/: Para dividir%: Para sacar el resto de las divisiones
Conclusiones
Si has estado en búsqueda de preprocesador CSS, quizás hayas oído hablar también de LESS. LESS ya estaba mucho antes que Sass y mucha gente empezó con él, pero de un tiempo a esta parte la gente prefiere usar Sass, y yo es el que recomiendo. Ashley Nolan preguntó a mas de 600 personas cuál preferían y los resultados son claros:
En definitiva, con sass puedes sacarle más partido al código CSS, vas a tardar mucho menos tiempo en hacer lo mismo. Lo malo es que tienes que andar compilando el código, pero eso se puede arreglar con una buena configuración de webpack para que te autogenere el css. Cuando creas una app con VueJS, te deja elegir si quieres usar Sass para que no tengas que configurar nada a mano.