Cómo llevar tus habilidades de Sass al siguiente nivel
Sass soporta algunas reglas adicionales y específicas conocidas como directivas de control.
Las directivas de control se definen para incluir estilos solamente si se cumplen determinadas condiciones o para incluir el mismo estilo varias veces con ligeras variaciones.
Y son muy útiles para definir mixins o funciones reutilizables.
@if()
La directiva de control @if() nos permite establecer condiciones para que se apliquen o no ciertas reglas. La condición permite incluir comparadores entre variables, constantes o cualquier expresión. Procesa su contenido si la expresión dentro es verdadera:
Se compila:
La declaración @if puede ir seguida de varios @else if y un @else:
Se compila:
@for()
La directiva de control @for() muestra repetidamente un conjunto de estilos. Esta directiva funciona de dos maneras diferentes:
- @for $var from [inicio] through [final]
- @for $var from [inicio] to [final]
La diferencia entre las dos sintaxis es el uso de la palabra clave through o to. En la sintaxis through los estilos se repiten desde el inicio hasta el final. Por su parte la sintaxis to los estilos se repiten de inicio a fin, sin incluir este último.
@each()
La directiva de control @each() tiene la siguiente sintaxis:
- $var puede ser cualquier nombre de variable
- <list or map> es una expresión que devuelve una lista o un mapa.
El funcionamiento de @each es el siguiente: se recorre toda la lista o mapa y en cada iteración, se asigna un valor diferente a la variable antes de compilar los estilos.
Se compila:
@while()
La directiva de control @while() toma una expresión y repite indefinidamente los estilos hasta que la expresión (condición) que le sigue da como resultado false.
Se compila:
Interpolación de variables
Las variables en Sass las utilizamos para almacenar información (valores) que vamos a usar más adelante.
La interpolación es una característica de Sass que nos permite colocar dentro de una variable el nombre de un selector y/o atributo.
Para interpolar una variable usamos: #{$var}
Ejemplo:
Se compila:
Funciones
Sass tiene por defecto una serie de funciones definidas, por ejemplo, para manipular colores, números, cadenas, entre otras funciones.
Sass también nos permite crear funciones.
Para declarar una función se debe utilizar la palabra @function seguida del nombre de la función que queremos declarar y entre paréntesis podremos pasar los argumentos que necesite nuestra función. Al termina de crear nuestra función, es necesario utilizar un @return seguido de lo que retornaría después de su ejecución:
Algunas de las funciones nativas de Sass son:
- Funciones para RGB
- Funciones para HSL
- Funciones para transparencia
- Funciones para cadenas
- Funciones para números
- Funciones para listas
- Funciones para mapas
- Funciones para selectores
Aquí puedes revisar todas las funciones de Sass:
