Etiqueta: Desarrollo Web

El SASS y LESS son lenguajes que son como un súper conjunto de CSS, estos añaden nuevas funcionalidades al CSS, como anidamiento de reglas, introducción de variables y mixins.

Estos lenguajes de estilo no pueden ser interpretados por los navegadores, para poder utilizarlos se necesita una librería JavaScript para que interprete el estilo, también es posible compilar el código en CSS.

En este artículo quiero mostrarles algunos ejemplos sencillos de cómo sería el código con las características para poder comparar el LESS y SASS con CSS y así tener una idea de la utilidad de estos.

Anidamiento

Si quisiesemos dar estilo a ‘h1′, ‘p’ y ‘a’ del header con CSS lo podríamos hacer así:

/* Compiled CSS */
#header h1 {
 font-size: 26px;
 font-weight: bold;
}
#header p {
 font-size: 12px;
}
#header p a {
 text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}

 

En cambio con SASS y con LESS podemos hacer uso de anidamiento:

#header {
 h1 {
 font-size: 26px;
 font-weight: bold;
 }
 p { font-size: 12px;
 a { text-decoration: none;
 &:hover { border-width: 1px }
 }
 }
}

Esto es un sencillo ejemplo, pero quienes hayan trabajado con CSS pronto se darán cuenta de la potencia que tiene esta pequeña funcionalidad.

Variables

Otra ventaja interesante de estos lenguajes es la de poder definir variables. Imagina que tienes un estilo ya realizado y que solo quieres cambiar el color del texto de toda una página web. Posiblemente tengas asignado el color que quieres sustituir en muchos sitios. Si hubiésemos podido definir una variable, simplemente con cambiar el valor de esa variable tendríamos los cambios realizados, y eso también nos lo permiten LESS y SASS. Veamos un ejemplo:

// SASS
 
// Con SASS definimos las variables antecediendo el
// nombre de la variable con el signo '$'
$color: #4D926F;
#header {
 color: $color;
}
h2 {
 color: $color;<
}

 
// LESS
// Con LESS definimos las variables antecediendo el<br />
// nombre de la variable con el signo '@'
@color: #4D926F;
#header {
 color: @color;
}
h2 {
 color: @color;
}

Mixins

Los mixins te permiten insertar todas las propiedades de una clase en otra clase, simplemente tienes que introducir el nombre de la clase como una de las propiedades. Los mixins pueden ser también como funciones, y tomar argumentos, como se ve en el ejemplo de abajo.

// SASS
@mixin rounded-corners ($radius: 5px) {
 -webkit-border-radius: $radius;
 -moz-border-radius: $radius;
 -ms-border-radius: $radius;
 -o-border-radius: $radius;
 border-radius: $radius;
}
#header {
 @include rounded-corners;
}
#footer {
 @include rounded-corners(10px);
}

 
// LESS
.rounded-corners (@radius: 5px) {
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 -ms-border-radius: @radius;
 -o-border-radius: @radius;
 border-radius: @radius;
}
#header {
 .rounded-corners;
}
#footer {
 .rounded-corners(10px);
}

En ambos casos el CSS resultante sería el siguiente

/* Compiled CSS */
#header {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 -o-border-radius: 5px;
 border-radius: 5px;
}
#footer {
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
}