Close
Image Alt

Variables en Sass

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:

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:

El resultado en la hoja de estilos .css resultante será:

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.

variables-css

Tipos de valores en las variables Sass

Hemos visto que podemos almacenar el código hexadecimal de un color:

Otros valores que podemos almacenar en una variable:

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:

el color que se usará es evidentemente el #000000. Pero si hacemos:

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:

De esta manera el valor será siempre 5px, a no ser que se defina de forma concreta otro. Por ejemplo:

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:

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?

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:

que se transforma en el archivo .css en:

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í:

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.

Comments

  • 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.

     

    6 July, 2013
    reply
  • 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 😉

    25 December, 2016
    reply

Post a Comment