Sass: Usando variables

En el post introductorio de Sass hemos visto algunas de las ventajas y funcionalidades basicas que nos provee, en este post nos adentraremos un poco mas en detalle acerca de esas funcionalidades haciendo incapíe en el uso de las variables y los distintos tipos de las mismas.

Ahora bien cuantas veces nos ha tocado crear en nuestras hojas de estilos en la que muchos de los valores de los atributos son los mismos pero para distintas clases, para poder evitar tener que reescribir nuestro código mas de una vez es que existen las variables dentro del mundo de Sass.

Introducción

Las variables nos permiten no tener que volver a declarar un valor, ya sea numero o texto, nuevamente dentro de nuestro archivo Sass para ello la forma de hacerlo es mediante el símbolo de $ seguido del nombre de la misma, como por ejemplo $colorNuevo.

Algo a tener en cuenta con el uso de variables es que si declaramos una variable en algún lado de nuestro archivo y luego por error la volvemos a declarar en algún otro lugar el valor de la misma se pisara y todo lo que use después de esa variable tendrá el nuevo valor. Esta situación es muy común cuando importamos un archivo dentro de otro (esto es por medio del comando @import “archivo”), por estos motivos el nombre de nuestras variables tienen que ser muy descriptivos y evitar usar nombres genéricos que se presten a que en otro archivo vuelvan a declararse.

Declaración y uso

Como se menciono en el apartado anterior la forma de declarar una variable es bastante simple ($variable) por lo cual iremos directamente a ejemplos concretos que muestren su uso:

  • Uso  básico
SASS CSS

$base: #777777;

.sidebar {

border: 1px solid $base;

p {

color: $base;

}

}

.sidebar {

border: 1px solid #777777;

}

.sidebar p {

color: #777777;

}

 

  • Sobre escritura (Al ser declarada mas de una vez se sobrescribe el valor de la variable)
SASS CSS

$title: ‘My Blog’;

$title: ‘About Me’;

h2:before {

content: $title;

}

h2:before {

content: ‘About Me’;

}

 

  • Si no sabemos si vamos a sobreescribir una variable podemos colocar !default en la variable
SASS CSS

$title: ‘My Blog’;

$title: ‘About Me !default’;

h2:before {

content: $title;

}

h2:before {

content: ‘My Blog’;

}

Tipos

Sass nos permite hasta el momento 7 tipos distintos de variables, veamos  en detalle cada una de ellas:

  • Boolean (true, false)

  • Cadenas de texto

  • Numeros

  • Listas

  • Colores

  • Nulos

  • Mapas

Operaciones

Dentro del mundo de Sass se pueden realizar operaciones básicas como el uso del mas (+), que tendrá distinto comportamiento dependiendo del tipo de variable que sea, haciendo la salvedad que hasta el momento las listas y los mapas no soportan ningún tipo de operación. Ahora veamos un ejemplo del uso del operador mas (+):

  • Colores
SASS CSS
p {

color: #010203 + #040506;

}

p {

color: #050709;

}

 

  • Cadenas
SASS CSS
p:before  {

content: “Foo ” + Bar;
font-family: sans- + “serif”;

}

p:before  {

content: “Foo Bar”;
font-family: sans-serif;

}

Alcance (scope)

Algo a tener en cuenta cuando se usan variables dentro de lo que es Sass es el scope (alcance) de las mismas, puntualmente se debe tener en cuenta dos cosas:

  • Al crear una variable dentro de una clase, la misma es solo visible dentro de la misma y no en otras dentro del archivo
  • Al modificar el valor de una variable dentro de una clase afecta al resto de las clases que usen esa clase ya que tendrán el nuevo valor y no el original.

Interpolacion

Esta característica de Sass nos permite no solo colocar dentro de una variable el valor de un atributo sino también el nombre de un atributo. Veamos esto con un ejemplo:

SASS CSS
$border: top;

.content {

border-#{$border}: 3px;

}

.line-#{$border} {

line-weigth: 2em;

}

.content {

border-top: 3px;

}

.line-top {

line-weigth: 2em;

}

Conclusión

Como hemos visto el uso de variables nos brinda una gran ayuda para evitar tener que repetir a lo largo de nuestro código el mismo valor que luego por algún motivo tendremos que cambiar (por ejemplo el color de los títulos), por este motivo es altamente recomendable el uso de variables en el mundo Sass.

 

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *