Esta es la tercera entrega del Curso de Sass. En este artículo vamos a ver una de las características más útiles de Sass: el uso de variables.
Cómo escribir una variable en Sass
Las variables en Sass se escriben con el prefijo $, por ejemplo:
1 | $color: #333333; |
Aquí hemos definido una variable $color a la que le hemos dado el valor de un color en formato hexadecimal #333333.
Esa variable la podemos utilizar más adelante dentro de nuestra hoja de estilos .scss. Por ejemplo:
1 2 3 4 5 6 7 | $color: #333333; .contenido { p { color: $color; } } |
El resultado en la hoja de estilos .css resultante será:
1 2 3 4 5 6 | .contenido { p { color: #333333; } } |
Vemos como hemos aplicado al párrafo que se encuentra dentro del contenedor con clase “contenido” un color cuyo valor será el que demos a la variable $color. Con esto os podéis imaginar cómo se simplifica la creación y la edición de una hoja de estilos. Podemos crear, por ejemplo, un archivo que podemos llamar _configuracion.scss donde pueden estar nuestras variables e importarlo tal y como vimos en el artículo anterior sobre Sass.
Tipos de valores en las variables Sass
Hemos visto que podemos almacenar el código hexadecimal de un color:
1 2 3 | $color: black; $borde: rgba(0, 255, 255, 0.5); $sombra: #666666; |
Otros valores que podemos almacenar en una variable:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Booleano $sombra: true; $borde: false; // Números, con o sin unidades $margen: 4px; $font-size: 3rem; $line-height: 1.5; // Cadenas de texto,con o sin comillas $principal: Georgia; $fuente: 'Helvetica Neue'; $mensaje: "Cargando..."; // Listas $nombres: Juan, Luis, María; $margin: 10px 10px 0 20px; // Null, se usan sobre todo en condicionales $bordes: null; |
Las aplicaciones de algunos de estos valores para variables las veremos más adelante en el curso.
Uso de !default en las variables
Si en el ejemplo anterior hacemos:
1 2 | $color: #333333; $color: #000000; |
el color que se usará es evidentemente el #000000. Pero si hacemos:
1 2 | $color: #333333; $color: #000000 !default; |
el color que se usará será #333333, porque primero comprueba si hay algún valor por defecto (en nuestro caso el #333333 al ser el primero que se ha definido) y en su caso, no lo cambia. ¿Para qué puede ser útil esto? Imaginémonos que tenemos un archivo _botones.scss que tiene valores por defecto para los botones de la web:
1 2 3 4 5 | $radio: 5px !default; .btn-a { border-radius: $radio; } |
De esta manera el valor será siempre 5px, a no ser que se defina de forma concreta otro. Por ejemplo:
1 2 | $radio: 3px; @import "botones"; |
Entonces el valor que se aplicará será 3px.
Variables globales… y otras no tanto
Si definimos una variable fuera de cualquier declaración de estilos, como hemos visto hasta ahora en este artículo, esta variable y su valor estarán disponibles de forma global. Pero, ¿qué sucede si definimos una variable dentro de una declaración como por ejemplo:
1 2 3 4 5 6 7 8 9 10 11 | .contenido { p { $color: #999; color: $color; } } .lateral { color: $color; } |
Vemos que la variable $color la hemos definido dentro de .contenido p, por lo que al usarla en .lateral nos dará un error:
Syntax error: Undefined variable: "$color"
¿Y qué sucede si tenemos una variable global y luego cambiamos su valor dentro de una declaración?
1 2 3 4 5 6 7 8 | $color: black; .contenido { p { $color: #999; color: $color; } } |
Para .contenido p el color será #999.
Interpolación
Podemos utilizar #{$variable} para introducir variables en selectores, nombres de propiedades y cadenas de texto. Por ejemplo, veamos este archivo .scss:
1 2 3 4 5 6 | $pos: top; .ventana-#{$pos} { position: absolute; #{$pos}: 35px; } |
que se transforma en el archivo .css en:
1 2 3 4 | .ventana-top { position: absolute; top: 35px; } |
Consejos a la hora e dar nombre a tus variables
Intenta no ser demasiado específico a la hora de dar nombre a las variables. Por ejemplo, a una variable para el color del texto la puedes llamar así:
1 | $negro:black; |
Pero, ¿qué sucede si luego se decides cambiar el color del texto a gris claro? Por eso, 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.
Nacho
Muy buenas las “pildorás” sobre SASS Juan, la verdad es que es un tema muy interesante, si quieres tener un código CSS más limpio, organizado y productivo combinándolo con OOCSS Y SMACSS.
Un saludo y gracias.
Juan Díaz-Bustamante
Gracias Nacho!
guillermo
Yo en vez de llamarle a las variables de color $red o $rojo les llamo $color1, $color2, $color3 y así para cada web nueva cambio los valores sin tener cosas absurdas como: $red: blue 😉