Aprende Sass en 15 minutos

Si picas a mano multitud de código CSS, un pre-procesador puede ayudarte a disminuir en gran medida los niveles de estrés y sobre todo a ahorrarte un montón de tiempo, que puede utilizar para hacer otras cosas. El uso de herramientas como Sass, Less, Stylus o PostCSS hace que las hojas de estilo extensas y difíciles de entender sean más asequibles y gestionables. Gracias a características como el uso de variables, funciones o los mixins, tu código estará mejor organizado. Lo que te permite desarrollar mucho más rápido y cosechar menos errores.

En este artículo vamos a explicarte cómo utilizar Sass y te enseñaremos algunas de sus características.

Empezando con Sass

Los ficheros de Sass no son interpretados por el navegador, lo que significa que tenemos que compilar a CSS estándar antes de que estén listos para ejecutarse en la web. Es por eso que necesitamos de alguna herramienta que nos ayuda a traducir los archivos de .scss a .css. A continuación te proponemos un par de opciones:

  • La solución más simple es utilizar una herramienta online para escribir y compilar Sass en el acto, como SassMeister.
  • También puedes utilizar un software de terceros. Tienes disponibles tanto opciones gratuitas como de pago. En este enlace puedes encontrar un montón de programas.
  • Por último, si prefieres linea de comandos, puedes instalar Sass en tu equipo y compilar los ficheros manualmente.

Si decides ir por la vía de línea de comandos, puedes instalar Sass en forma original (desarrollado en Ruby) o puedes probar el port de Node.js (recomendado). Hay muchos otros wrappers, pero que quieres que te diga, me enamore de la versión de Node.js hace tiempo y es la que más me gusta.

Aquí tienes como se compilan los archivos .scss utilizando la línea de comandos de Node:

node-sass input.scss output.css

Además, mencionar que Sass ofrece dos sintaxis diferentes, Sass y SCSS. Ambas hacen las mismas cosas, pero se escriben de manera distinta. SCSS es la nueva y es considerada generalmente como la mejor, por lo que la aplicaremos para este tutorial. Si quieres más información sobre la diferencia entre los dos, puedes echar un vistazo a este excelente artículo.

Variables

Las variables de Sass funcionan de manera similar a las de cualquier lenguaje de programación. Al definir una variable, almacenamos en su interior un valor dererminado que, por lo general, utilizaremos mucho en el fichero, como una paleta de colores, un color determinado, una fuente o incluso, el conjunto de especificaciones de un box-shadow.

A continuación puedes ver un sencillo ejemplo. Te mostramos tanto el código SCSS, como el CSS.

SCSS

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}

CSS

h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

La idea detrás de todo esto es que luego podamos volver a utilizar los mismos valores de una manera rápida, o si es necesario un cambio, podemos declarar el nuevo valor en un solo lugar (la definición de la variable), en lugar de aplicar el cambio manualmente a todas partes afectadas por la propiedad.

Mixins

Puedes imaginarte a los mixins como si fuesen una versión simplificada de las clases constructoras de la mayoría de lenguajes de programación . Es decir, puedes coger un grupo de declaraciones CSS y volver a utilzarlas donde quiera aplicarlas.

Los mixins incluso aceptan argumentos para la opción de establecer valores por defecto. En el siguiente ejemplo se define un mixin llamado square, que luego utilizaremos para crear otros de diferentes tamaños y colores.

SCSS

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}

CSS

.small-blue-square {
  width: 20px;
  height: 20px;
  background-color: blue; 
}

.big-red-square {
  width: 300px;
  height: 300px;
  background-color: red;
}

Otra manera eficiente de utilizar los mixins es en el caso de que una propiedad requiera prefijos para funcionar en todos los navegadores.

SCSS

@mixin transform-tilt() {
  $tilt: rotate(15deg);

  -webkit-transform: $tilt; 
      -ms-transform: $tilt; 
          transform: $tilt; 
}

.frame:hover { 
  @include transform-tilt; 
}

CSS

.frame:hover {
  -webkit-transform: rotate(15deg); 
  -ms-transform: rotate(15deg); 
  transform: rotate(15deg); 
}

Extend

La siguiente característica que vamos a ver es @extend, que te permite heredar las propiedades CSS de un selector a otro. Esto funciona de manera similar al sistema de mixins, pero es preferible cuando queremos crear una conexión lógica entre los elementos de una página.

La extensiones se deben utilizar cuando necesitamos elementos de estilo similar, que difieren en algunos detalles. Por ejemplo, vamos a crear dos botones de diálogo, uno de aceptar y otro para cancelar.

SCSS

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}

CSS

.dialog-button, .confirm, .cancel {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer; 
}

.confirm {
  background-color: #87bae1;
  float: left; 
}

.cancel {
  background-color: #e4749e;
  float: right; 
}

Si echas un vistazo a la versión CSS del código, verás que Sass combina los selectores en vez de repetir las mismas declaraciones una y otra vez, ahorrándonos un valioso tiempo.

Anidación

HTML sigue una estricta estructura de anidación mientras que CSS, por lo general, es un caos total. Con la anidación de Sass puedes organizar tu hoja de estilo de una manera que se asemeja a la de HTML, lo que reduce la posibilidad de conflictos en el CSS.

Echa un vistazo a este ejemplo rápido, en el que definimos una lista que contiene una serie de enlaces:

SCSS

ul {
  list-style: none;

  li {
    padding: 15px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }

  }

}

CSS

ul {
  list-style: none; 
}

ul li {
  padding: 15px;
  display: inline-block; 
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444; 
}

Operaciones

Con Sass puedes realizar operaciones matemáticas básicas en la misma hoja de estilo y es tan sencillo como poner el símbolo aritmético adecuado.

SCSS

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}

CSS

.container {
  width: 800px; 
}

.column-half {
  width: 400px; 
}

.column-fifth {
  width: 160px; 
}

Aunque vanilla CSS ahora ofrece esta característica también en forma de calc(), la alternativa de Sass es más rápida, tiene operaciones % y puede ser aplicada a una gama más amplia de datos, como por ejemplo colores y strings.

Funciones

Sass ofrece cuenta con una larga lista de funciones incorporadas. Sirven para todo tipo de propósitos, incluyendo la manipulación de cadenas, operaciones relacionadas con el color y métodos matemáticos prácticos como random() y round().

Para mostrar una de las funciones más simples de Sass, vamos a crear un código que utiliza darken($color, $amount) para darle efecto a un hover.

SCSS

$awesome-blue: #2196F3;

a {
  padding: 10 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}

CSS

a {
  padding: 10 15px;
  background-color: #2196F3; 
}

a:hover {
  background-color: #0c7cd5; 
}

Aparte de la enorme lista de funciones disponibles, también puedes crear las tuyas propias. Sass soporta el control de flujo, así que, si quieres, puedes crear comportamientos bastante complejos.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP