Introducción a SASS

Logo de Sass

Si sigues escribiendo código CSS manualmente, SASS puede serte de gran ayuda. Este como otros pre-procesadores pueden ser una potente herramienta a la hora de desarrollar hojas de estilo en CSS.  Aprender CSS no es fácil, saber que hace cada propiedad, o que exploradores la soportan. Tal vez porque originalmente no fue diseñado para hacer las cosas que hacemos hoy en día. Y hay que añadir la característica de que nuestras hojas de estilo en muchos casos pueden ser muy repetitivas, y cada vez son más largas.

¿Qué es SASS?

Sass es un pre-procesador que te permite usar características no existentes en el CSS actual, como las variables o anidar. Una vez que comiences a desarrollar el archivo en Sass puedes compilarlo con herramientas como Koala, Codekit o Scout y convertirlo en un archivo CSS normal.

Características

Variables

Permite utilizar variables para almacenar información que luego vamos a volver a utilizar. Sass utiliza el símbolo $ para crear estas variables. Por ejemplo:

1
2
3
4
5
6
7
$fuente-predeterminada:    Helvetica, sans-serif;
$color-primario: #000000;
 
body {
  font: 100% $fuente-predeterminada;
  color: $color-primario;
}

Este sería el código en Sass, en este caso los archivos se guardan con la extensión “.scss”. Y “$fuente-predeterminada” y “$color-primario” serían las variables. En el archivo css normal aparecería de la siguiente forma:

1
2
3
4
body {
  font: 100% Helvetica, sans-serif;
  color: #000000;
}

Anidar

Permite anidar los elementos de una forma similar a como lo haríamos a través de HTML. Por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li { display: inline-block; }
 
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Hemos declarado que dentro del selector nav estarían los selectores ul, li y a. Esto permite organizar mejor el CSS y quedaría de la siguiente forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
nav li {
  display: inline-block;
}
 
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

@mixin

La propiedad @mixin que te permite hacer un grupo de declaraciones CSS que podrás reutilizar a lo largo del desarrollo de la página. Aquí un ejemplo con la propiedad border-radius:

1
2
3
4
5
6
7
8
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
 
.box { @include border-radius(10px); }

Tan solo tienes que darle un nombre a la propiedad @mixin y después de su creación tan solo hay que usar la propiedad @include. En el ejemplo también se usa la variable $radius con lo que luego le podremos poner el valor que queramos.

1
2
3
4
5
6
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Enlaces de interés

Si quieres comenzar con Sass aquí tienes unos enlaces útiles de donde puedes descargar los compiladores o en el caso que uses el editor Sublime Text poder configurarlo.

También te puede interesar

Profesional del sector turístico, y un verdadero apasionado por la comunicación y el marketing online.

One Response to Introducción a SASS

  1. Hosting dice:

    Ahora que ya tenemos claro los conceptos claves, veamos algunas de las caracteristicas que convierten a Sass en algo tan potente.

Deja un comentario

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