Preprocesadores CSS: SASS

Introducción a SASS por Daniel Rodríguez

Norman Bluhm

archivado en: HTML/CSS / 30 septiembre, 2014

Daniel Rodríguez ha escrito la segunda parte a su serie sobre preprocesadores css, en este caso dedicada a SASS, que es el que recomiendo a la que una aplicación o página web sea un poco compleja.

Se recomienda haber hecho con antelación el tutorial de LESS.

Para instalar SASS nos dirigimos a su web. SASS, a diferencia de LESS, no compila a tiempo real desde el cliente, por lo tanto tendremos que echar mano de Ruby.

Bajamos Ruby desde la web y lo instalamos sin más complicaciones.

Escribimos Ruby en nuestro buscador y abrimos el que sale con un icono de cmd, ”Start Command Prompt” y lanzamos estas líneas:

$ gem update –system

$ gem install rubygems-update

$ update_rubygems

Ya tenemos RubyGems instalado y actualizado perfectamente.

Ahora vamos con SASS:

$ gem install sass

$ sudo gem install sass

Para comprobar que todo ha ido bien nos aseguramos con $ gem update –system, que nos tendrá que dar la versión y un nombre.

Hasta aquí todo perfecto. Si algo ha fallado volved a empezar o buscar más información al respecto en internet, ya que si no no podremos continuar.

Ahora hacemos igual que con Node junto a LESS, nos vamos a la carpeta con cd “ruta” y escribimos en nuestro terminal (asegurémonos de tener un archivo .scss al menos para probar) $ sass –-watch estilos.scss:estilos.css. Al dar a intro se creará la compilación de nuestro archivo CSS.

Pero no preouparos, no vamos a tener que escribir esto constantemente cada vez que queramos probar el código de nuestro estilo. Dejando la ventana de comando como estaba en el paso anterior, si ahora cambiamos nuestro SCSS y guardamos se ejecutará automáticamente la compilación con el CSS actualizado (de ahí lo de “watch” en el comando).

Así que ya podemos empezar a trabajar. Usaremos el mismo esqueleto que la vez anterior, en LESS, pero ahora sin llamar a la librería, cambiando el .less por el .scss y cambiando también el rel="stylesheet/less" por rel="stylesheet".

VARIABLES

Poco hay que explicar aquí con respecto a LESS, sólo que en vez de ir precedidas con @ van con $, como en PHP.
La forma de uso es exactamente igual que con LESS, por lo tanto pasaremos al siguiente punto.

MIXINS

En este apartado sí hay alguna que otra diferencia con respecto a LESS.
En SASS los mixins han de ser declarados antes del nombre con @mixin y al llamarlos lo debemos hacer con @include, de esta forma:

@mixin estilo1($color: red) {

color: $color;

border: 1px solid $color;

}

h1{

@include estilo1(blue);

}

Como vemos hemos puesto un valor por defecto, cosa que funciona igual que en LESS.
No confundir los mixins de SASS con las variables de LESS, ya que ambas van precedidas con @.

Veamos un ejemplo práctico.

Pensemos que tenemos que crear varias clases de cículos diferentes. Para ello nos creamos un mixin con el estilo para dibujar el círculo, pero poniendo como variables las únicas 2 propiedades que puede tener el círculo, tamaño y color:

@mixin circulo($width, $color) {

width: $width;

height: $width;

background: $color;

-webkit-border-radius: $width/2;

-moz-border-radius: $width/2;

border-radius: $width/2;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

background-clip: padding-box;

display: inline-block;

}

Ahora tenemos que ir a nuestro HTML y dibujar los divs que queramos vacíos: <div id=”circulo1”></div> <div id=”circulo2”></div> etc.

Y especificar en el css de nuevo el mixin dentro de esas capas con las propiedades que les queramos dar:

#circulo1 {

@include circulo(50px, #345334);

}

#circulo2 {

@include circulo(150px, #3ddcee);

}

#circulo3 {

@include circulo(20px, #458787);

}

#circulo4 {

@include circulo(200px, #333444);

}

Como vemos en este sencillo ejemplo hemos creado un mixin con el cual podemos crear fácilmente círculos de una forma muy rápida.

Ahora veamos el mismo ejemplo llevado por ejemplo a triángulos. Aunque podamos pensar que puede ser exactamente igual a los triángulos podemos darle otra propiedad más.

Nos vamos a la web css-tricks para sacar el estilo de un triángulo y lo metemos en nuestro CSS. Como vemos tenemos otra nueva propiedad que es la orientación del triángulo, la cual para dársela va jugando con los bordes transparentes del rectángulo para similar un triángulo.

Ahora se nos plantea un nuevo reto. ¿Cómo sabemos cuándo vamos a querer en el mixin utilizar un borde u otro para cambiar la orientación del triángulo?
Muy fácil, con “ifs”.

Sabemos que tenemos 2 propiedades, las mismas de antes, que ya podemos reemplazar en nuestro mixin por variables que le vamos a pasar y la tercera será una palabra que determine la posición del triángulo, la que queramos.
El mixin se quedaría así:

@mixin triangulo($dir, $width, $color) {

@if $dir == arriba {

border-left: $width solid transparent;

border-right: $width solid transparent;

border-bottom: $width solid $color;

}

@if $dir == abajo {

border-left: $width solid transparent;

border-right: $width solid transparent;

border-top: $width solid $color;

}

@if $dir == derecha {

border-top: $width solid transparent;

border-bottom: $width solid transparent;

border-left: $width solid $color;

}

@if $dir == izquierda {

border-top: $width solid transparent;

border-bottom: $width solid transparent;

border-right: $width solid $color;

}

width: 0;

height: 0;

display: inline-block;

}

Dibujaríamos de nuevo cuantos triángulos quisiéramos y le daríamos a cada uno un estilo así:

#triangulo1{

@include triangulo(arriba, 35px, red)

}

Como vemos el uso de los ifs no es para nada limitado. Podemos usar un mismo mixin para dibujar triángulos, cuadrados, círculos, etc. Sólo tendríamos que pasarle otro parámetro que indique el objeto a dibujar y dentro del mixin un if por cada objeto.

FUNCIONES

Como dijimos en LESS, los mixins los podíamos entender como funciones, pero no en SASS, ya que aquí además de mixins hay funciones.

¿Qué diferencia hay?

Los mixins los usamos para dar un estilo predefinido como por ejemplo un border-radius, con todos los border-radius para todos los diferentes navegadores o un color, ancho, alto y fondo para varias clases (es más fácil usar el mixin en el css que repetir la clase en el html).

Las funciones en cambio las creamos para llevar un proceso a cabo, ya sea por ejemplo de cálculo, y nos devolverá un valor, lo cual es lo único que nos importa.

Llevándolo a un ejemplo práctico vamos a crear una función para sacar un color con opacidad a partir de un color normal.

Para ello creamos un div en nuestro html con un texto de prueba y en nuestro .scss añadimos la función:

@function contraste($fondo, $val) {

@return ( $fondo + $val );

}

Y la usamos dentro de esa capa que hemos creado anteriormente:

#capa {

color: contraste(red + 40, 100);

}

Y voilà, ya tenemos un color rojo tirando a rosa (rojo con opacidad).

Como vemos es un ejemplo muy simple que suma 2 variables, pero extrapolado a un ejemplo más complejo, con el uso de variables, mixins, herencias (ahora lo veremos) y/o demás funciones podemos llevar a cabo una gran función compleja en CSS.

Para ver otro ejemplo vamos a implementar ifs dentro de la función:

@function contraste($fondo) {

@if lightness($fondo) < 50% {

@return lighten( $fondo, 70% );

} @else {

@return darken( $fondo, 90% );

}

}

Como vemos ahora comprobamos con una función de SASS qué porcentaje de contraste tiene el texto para darle uno u otro.

HERENCIAS

Podemos extender el estilo de una clase o capa otra que deseemos sin tener que repetir todas las líneas que que eso conllevaría en CSS. Veamos un claro ejemplo:

$color: red;

.estilos {

color: $color;

border: 1px solid $color;

}

h1{

@extend .estilos;

}

¿Qué diferencia hay entre ponerlo así o seguir usando mixin para esto?

Si hacemos esto con extend cogeremos los estilos de esa clase de todas las hojas de estilos que tengamos agregadas. Si siguiéramos editando .estilos unas líneas más adelante (práctica no recomendable ya que .estilos está abierto arriba, pero de todas formas lo veremos como un ejemplo) también tomaría esos estilos en el extend.

Creo que una buena costumbre sería no usar los mixins como si fueran extends, es decir, para dar estilo únicamente, ya que en el compilado, al usar mixin separa los estilos alargardo el código del CSS. Pongo un claro ejemplo:

MIXIN:

$color: red;

.estilos {

color: $color;

border: 1px solid $color;

}

@mixin prueba(){

color: $color;

border: 1px solid $color;

}

h1{

@include prueba;

}

CSS del mixin:

.estilos {

color: red;

border: 1px solid red;

}

h1 {

color: red;

border: 1px solid red;

}

EXTEND:

$color: red;

.estilos {

color: $color;

border: 1px solid $color;

}

h1{

@extend .estilos;

}

CSS del extend:

.estilos, h1 {

color: red;

border: 1px solid red;

}

Como vemos el resultado a visualizar en la web es el mismo, pero usando mixin para algo que podemos hacer fácilmente con extend hace que nuestro CSS final se vea alargado en cuanto a líneas de código se refiere.
Podemos importar otras hojas estilos de SASS como ya sabemos hacerlo en CSS:

@import “estilo”;

No hará falta añadirle la extensión .scss. Cuando compilemos al css esa hoja de estilos que hemos añadido se verá añadida en nuestro css, no generando nuevos .css de más.

Esto puede ser últil para estructurar el código de una manera más ordenada. Por ejemplo, podríamos tener en un .scss las variables que nos van a hacer falta, en otro los mixins, etc. y añadirlos a nuestro .scss principal en la primera línea los que nos vayan haciendo falta.

BUCLES

Podemos recorrer secciones del HTML fácilmente con SASS a traves de eachs.
Veamos un ejemplo práctico.

Tenemos que añadir en nuestra web 4 iconos de redes sociales. Para ello escribimos el código HTML:

<ul id="redes">

<li><a class="twitter" href="#">Twitter</a></li>

<li><a class="facebook" href="#">Facebook </a></li>

<li><a class="youtube" href="#">Youtube </a></li>

<li><a class="rss" href="#">RSS </a></li>

</ul>

Le damos también un sencillo estilo a los iconos:

#redes {

overflow: auto;

li {

display:block;

float:left;

width:65px;

height:65px;

text-indent:-999px;

}

}

Buscamos 4 imágenes representativas de cada red social y las guardamos en una carpeta de imágenes.
Ahora nos creamos un array en SASS de la siguiente forma:
$iconos:(twitter,facebook, youtube,rss);

Hemos de tener en cuenta que las imágenes que nos hemos bajado han de llamarse así, como los textos del array.

Ahora sólo nos queda recorrer los diferentes enlaces a las redes con el each como dijimos anteriormente:

@each $redes in $iconos {

.#{$redes} {

background:url('img/#{$redes}.png') no-repeat;

background-size: 100% 100%;

display: inline-block;

height: 100%;

width: 100%;

}

}

Como vemos para indicar el nombre de la imagen lo hacemos con #{$redes}. Si recordamos LESS, en él lo hacíamos con ~"@{rem}. Apreciamos una diferencia significativa, cosa que tenemos que tener en cuenta si cambiamos de SASS a LESS con facilidad, ya que es fácil equivocarse.
De todas formas si fallásemos en el código, los compiladores nos avisan en la línea que fallamos ahorrándonos tener que mirar línea por línea.

Pero veamos también cómo hacer un each creando el array dentro de él y dándole más dimensión:

$width: 100%;

@each $redes in (

twitter $width,

facebook $width - 20%,

youtube $width - 40%,

rss $width - 60%

){

.#{nth($redes,1)} {

width: #{nth($redes,2)};

height: #{nth($redes,2)};

}

}

Como vemos podemos acceder a la posición 2 del array (que sería el tamaño) pasándole la posición (contando desde 1 como vemos, no desde 0). No hace falta utilizar comas para separar los valores, sólo el espacio, ya que las comas indican una nueva posición inicial en el array.

Al igual que eachs, también podemos hacer nuestros bucles con for de tal forma:

@for $i from 1 through 4 {

.clase-#{$i} {

margin-right: 10px * $i;

}

}

Lo que en el CSS daría lugar a esto:

.clase-1 {

margin-right: 10px;

}

.clase-2 {

margin-right: 20px;

}

.clase-3 {

margin-right: 30px;

}

.clase-4 {

margin-right: 40px;

}

También podríamos hacer esto mismo con un while:

$i: 1;

@while $i < 5 {

.clase-#{$i} {

margin-right: 10px *$i;

}

$i: $i + 1;

}

Lo cual daría el mismo resultado en CSS. Aquí hemos de tener en cuenta que tenemos que declarar con antelación la variable e ir incrementándola.

LISTAS ANIDADAS

Podemos anidar los estilos de la misma forma que en Less, pero aquí podemos encontrar ciertas diferencias. Por ejemplo, podemos anidar también estilos como muestra el siguiente ejemplo:

CSS:

.btn {

text-decoration: underline;

text-transform: uppercase;

}

SASS:

.btn {

text: {

decoration: underline;

transform: uppercase;

}

}

Recordaremos también que para anidar eventos a los estilos en Less lo hacíamos con &. Pues bien, en Sass podemos hacerlo igual, pero no sólo podemos hacer referencia a los eventos, también podemos usarlo para referirnos a una etiqueta con más de una capa.
En css podemos hacer esto:
HTML:

<div class=”claseA claseB”></div>

CSS:

.claseA.claseB {

color: red;

}

SASS:

.claseA {

&claseB {

color: red;

}

}

Esto lo utilizaremos cuando queramos darle un estilo como decimos a las etiquetas donde se repiten estas dos clases. Si hubiera un espacio entre .claseA y .claseB, como sabemos sólo afectaría a las .claseB que son hijas de .claseA, lo cual sabemos que tanto en Less como en Sass se hace:

.claseA {

.claseB {

color: red;

}

}

Imaginemos también que tenemos una clase que es hija de otra con unos estilos:

.cajita {

background: red;

width:50px;

}

#capa .cajita{

height: 50px;

}

Aquí el símbolo & lo podemos poner al final del nombre para hacer referencia a la clase o capa donde estamos escribiendo el estilo. Me explico:

.cajita {

background: red;

width:50px;

#capa & {

height: 50px;

}

}

Esto haría referencia a la capa superior, en orden siempre con las clases o capas, según tengamos montado el estilo. O sea:

.cajita {

background: red;

width:50px;

h2 {

color: red;

#capa & {

height: 50px;

}

}

}

Esto se compilaría en el css a:

.cajita {

background: red;

width:50px;

}

.cajita h2 {

color: red;

}

#capa .cajita h2 {

height: 50px;

}

Aunque este último tipo de nestings (que es como se llaman a estos estilos anidados unos dentro de otros) como vemos nos ayuden mucho a la hora de escribir código no debemos abusar de ellos, ya que no son la manera más correcta de aplicar los estilos, sobre todo cuando los usamos en unos subniveles muy bajos.

...Y MÁS COSAS

Comentaremos algunos detalles que no son lo suficientemente grandes para englobarlos en un apartado, pero sí lo suficiente para no dejarlos atrás:

Podemos escribir código rgba con código hexadecimal. Es decir, si ponemos rgba(#333,0.5) esto nos lo traducirá a rgba(51, 51, 51, 0.5).

Hay funciones como percentage, con la cual podemos pasar de px a %. Pensemos que tenemos una web de 1440px de ancho y tenemos un div que tiene que ser 550px. Para darle un tamaño fluido lo pondríamos así:

width: percentage(550px / 1440px);

lo que se traduciría en el CSS a:

width: 38.19444%;

Podemos cambiar la escucha que tenemos activada en Ruby para que nos compile con un estilo diferente. Por ejemplo:

$ sass –w estilos.scss:estilos.css –-style expanded

$ sass –w estilos.scss:estilos.css –-style compact

$ sass --watch a.scss:a.css --style compressed

Con extend podemos crear “Placeholder selectors” de tal forma:

SASS:

#main %blue {

Color: #fff;

Background-color: blue;

Font-size: 14px;

}

.clase {

@extend %blue;

}

CSS:

#main .clase {

Color: #fff;

Background-color: blue;

Font-size: 14px;

}

Si no hubiésemos utilizado el parámetro %blue para especificar la nueva clase y hubiésemos utilizado el extend normal los estilos se abrían añadido a .clase y no a #main .clase.

Podemos simplificar el trabajo de las Media Queries con SASS:

@mixin tlf {

@media only screen and (max-width:480px) {

content;

}

}

.main {

header {

wdth: 80%;

mrgin: 0 auto;

hight: 200px;

include tlf {

header {

width: 100%;

}

}

}

CSS:

.main .header {

width: 80%;

margin: 0 auto;

height: 200px;

}

@media only screen and (max-width: 480px) {

.main .header {

width: 100%;

}

}

En CSS podemos comentar como ya sabemos con /* Comentario */, pero en SASS podemos añadir un tipo de comentario que no se verá compilado en el CSS final. Esto es útil porque podemos hablar sobre variables en algún comentario que no aparecán luego en el CSS y el que vea este CSS final no tiene por qué saber nada de variables, además éstas no aparecerán como ya sabemos.

// Variable para grises claros de la vista de ventas

$ gris_C: #ddd;

/* Ventas */

.ventas {

color: $gris_C;

}

Se compilaría a:

/* Ventas */

.ventas {

color: #ddd;

}

- Algunas funciones de SASS.

|| Tags: ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.