Uso de variables

En este artículo vamos a empezar a trabajar con SASS con una prestación especialmente interesante, que todos los que hemos tenido que crear o manejar hojas de estilo hemos echado de menos. Se trata de las variables. Qué interesante sería que pudiéramos establecer una variable con, digamos, la definición de un color, y luego asignarle dicha variable a todos los selectores de nuestro documento que deseáramos visualizar en dicho color. Si más adelante queremos cambiar el color, sólo tendríamos que cambiar el valor de la variable en la línea donde la hayamos declarado, y todos los elementos afectados cambiarían de color.

Desafortunadamente, a día de hoy eso no es posible con CSS, pero sí lo es con SASS. Y, al transpilar SASS a CSS todos los cambios necesarios ocurren como por arte de magia.

Y, para más alegría nuestra, la sintaxis a emplear es extremadamente simple. Vamos a ello.

PREPARANDO EL ESCENARIO

Vamos a partir del escenario que dejamos preparado en el artículo anterior. Como lo que vamos a hacer es crear código SASS y luego transpilarlo a CSS, vamos a instalar gulp, con el correspondiente plugin, para poder usarlo tal cómo aprendimos a hacer en este artículo y en este otro. Resumiendo, abrimos la terminal de comandos en el directorio del proyecto y tecleamos:

npm init -y
npm install --save-dev gulp
npm install --save-dev gulp-sass
npm install --save-dev gulp-autoprefixer

A continuación, en el directorio del proyecto, creamos el archivo gulpfile.js, así:

Ahora creamos, en el directorio /scss del proyecto, un archivo que se va a llamar styles.scss. De momento, el archivo está vacío, sin código alguno. A continuación ponemos en marcha la tarea default con el comando de consola gulp. Después, escribimos el código siguiente en /scss/styles.scss:

Como el gestor de tareas está «vigilando» los archivos con extensión .scss que se encuentran en el directorio /scss, automáticamente crea el archivo /css/styles.css y transpila el código SASS a CSS. El resultado es el siguiente:

Como ves, se ha tomado el valor de las variables declaradas en SASS y sus valores se han implementado en el archivo CSS, en donde se referenciaban las variables en el código original. Si estuvieran referenciadas en más declaraciones de selectores, cada vez que cambiemos el valor de una variable de SASS y hagamos la correspondiente transpilación, se cambiarán los colores de todas las reglas CSS que se usen en el archivo de estilos definitivo.

Recuerda que para declarar y referenciar una variable, en SASS seguimos las siguientes reglas:

  • El nombre de la variable debe ir precedido del signo $. A los desarrolladores de PHP esto nos resulta muy familiar.
  • En la declaración, el nombre se relaciona con el valor mediante el signo :. No se emplea el operador de asignación =, habitual en los lenguajes de programación.
Para poder adquirir un buen conocimiento sobre SASS, resulta imprescindible tener una base lo más sólida posible de los selectores y las reglas CSS. Si te «choca» algún selector con el que no estés familiarizado, te sugiero que leas estos artículos o, al menos, este en concreto.

TIPOS DE VARIABLES

En SASS podemos definir distintos tipos de variables. Realmente, el tipo de una variable viene dado por su contenido (al estilo de PHP o JavaScript), y no por el contenedor (como ocurre, por ejemplo, en Java o C++). Que los puritanos me perdonen por las comparaciones, pero creo que sirven para aclarar este punto.

Por tanto, en SASS, más que hablar de tipos de variables deberíamos hablar de tipos de datos. Los tipos de datos que se emplean en SASS aparecen recogidos a continuación:

Variables de color. Las hemos usado en el ejemplo de este artículo. Se emplean para definir un color, y pueden expresarse en hexadecimal ($lineColor: #FF432C;), en hexadecimal abreviado ($lineColor: #F6C;), en nominal ($lineColor: blue;), en RGB ($lineColor: rgb(180, 34, 210);) o en RGBA ($lineColor: rgba(180, 34, 210, 0.7);). Los colores pueden, además, aclararse u oscurecerse, así cómo calcularse mediante fórmulas. En artículos posteriores veremos estas capacidades de SASS.

Variables booleanas. Pueden adoptar un valor booleano ($borderLine: true; o $borderLine: false;).

Medidas. Pueden expresarse en unidades absolutas ($topMargin: 10px; o $topMargin: 2.3em;), relativas ($topMargin: 1.7rem;), o porcentuales ($topMargin: 10%;). Además, las medidas pueden calcularse combinando distintas unidades, como veremos en artículos posteriores.

Cadenas literales. Pueden expresarse con o sin comillas ($titleFont: Helvetica;, $titleFont: 'Helvetica';$titleFont: "Helvetica";).

Listas. Pueden emplearse en los mismos contextos que empleamos listas de valores en CSS ($titleFont: Helvetica, Arial, Trebuchet; o $padding: 10px 20px 4px 20px;).

Valor nulo. Se puede asignar un valor nulo a una variable ($space: null;). No es muy habitual, pero puede hacerse, para su uso, por ejemplo, en condicionales (hablaremos de ese tema en artículos posteriores).

COMENTARIOS EN SASS

Antes de dar por terminado este artículo, quiero aprovechar para incluir un tema breve, pero interesante. En ficheros SASS podemos incluir dos tipos de comentarios:

  • Comentarios multilínea. Como en la mayoría de los lenguajes modernos, se inician con /* y se finalizan con */. Aunque, por convencionalismo, se les llame multilínea, pueden, por supuesto, ser de una sola línea física. Estos comentarios se incluirán automáticamente en el CSS resultante, al hacer la transpilación.
  • Comentarios de una línea. Al igual que en muchos otros lenguajes, se inician con //. Por supuesto, puede haber varias líneas físicas seguidas de comentarios, pero cada una deberá iniciarse con //. Estos comentarios NO son incluidos en el CSS resultante al transpilar.
  • Por último, están los comentarios relativos al origen de las reglas CSS que no se escriben en SASS, pero que aparecen en el CSS transpilado si, en el uso del gulp-sass, en tu archivo gulpfile.js, tienes activada la opción sourceComments: true (como en este ejemplo).

CONCLUYENDO

Hay un aspecto concreto del uso de variables, que es el ámbito de vida de las mismas. Es un tema que tocaremos en el próximo artículo, donde hablaremos de anidamiento. Por lo demás, puedes descargarte los ficheros de este artículo en este enlace.

   

Deja un comentario