Guía de Sass para principiantes

Author
Por Darío Rivera
Publicado el en CSS

Sass es un lenguaje de hojas de estilos que puede ser compilado a CSS. Esto significa que no puede ser utilizado directamente en el navegador pero mediante herramientas de compilado puede ser reescrito para hacerlo compatible con los navegadores.

La mayor ventaja de Sass es que puedes reutilizar tu código CSS y desarrollar estilos con mucha mayor rapidez y consistencia que el CSS puro. En esta guía rápida aprenderás a instalar y utilizar Sass para que de esta forma puedas empezar a utilizarlo en tus proyectos web.

Instalación

Existen varias formas de instalar Sass. Sin embargo en esta guía veremos cómo agregarlo a un proyecto que maneje sus dependencias con npm. Seguramente tu ya tienes un proyecto corriendo en Laravel o cualquier otro framework de desarrollo web. No debería ser complejo después de seguir estos pasos agregarlo en tu proyecto específico.

Lo primero que vamos a hacer es crear un proyecto inicial en npm con el siguiente comando.

npm init -y

Este comando creará el archivo package.json en donde estará la configuración de dependencias de nuestro proyecto. Lo siguiente será instalar sass como dependencia de desarrollo.

npm i -D sass

Ejecución de Sass

Para ejecutar sass vamos a crear dos comandos en la zona de scripts de nuestro archivo package.json.

"scripts": {
    "build": "sass src/styles.scss css/styles.css",
    "watch": "sass src/styles.scss css/styles.css --watch"
}

El primer comando toma lo que está en el archivo src/styles.scss aplica el procesamiento del archivo y finalmente genera el archivo css/styles.css. El segundo comando hace exactamente lo mismo con la diferencia que el comando quedará en ejecución en la terminal para que a medida que modifiquemos nuestros estilos se genere automáticamente el output.

Sintáxis de Sass

Vamos a ver una a una algunas de la features de Sass más populares.

Sass markup

Puedes anidar tus estilos tal y como lo harías en HTML

Syntax

body {
  background: white;
  h1 {
    color: black;
  }
}

CSS

body {
  background: white;
}

body h1 {
  color: black;
}

Variables

Con el uso de variables puedes utilizar un mismo valor a lo largo de todo el código CSS y cambiarlo fácilmente cuando se requira.

Syntax

$base-color: white;

.btn-#{$base-color} {
  background-color: $base-color;
}

.base-background {
  background: url("/icons/bg/#{$base-color}");
}

CSS

.btn-white {
  background-color: white;
}

.base-background {
  background: url("/icons/bg/white");
}

Control de flujo

Con Sass también puedes tener control de flujo tal y como se haría en la mayoría de lenguajes de programación.

@if

Syntax

$base-color: white;

@if $base-color == white {
  .base-contrast {
    background-color: black;
  }
}

CSS

.base-contrast {
  background-color: black;
}

@each

Syntax

$dir: assets/icons;

@each $icon in (foo, bar, baz) {
  .icon-#{$icon} {
    background: url('#{$dir}/#{$icon}.png');
  }
}

CSS

.icon-foo {
  background: url('assets/icons/foo.png');
}

.icon-bar {
  background: url('assets/icons/bar.png');
}

.icon-baz {
  background: url('assets/icons/baz.png');
}

@for

Syntax

@for $count from 1 to 5 {
  @if $count > 2 {
    .col-#{$count} {
      width: #{$count} + 0%;
    }
  }
}

CSS

.col-3 {
  width: 30%;
}

.col-4 {
  width: 50%;
}

Utilizando through en vez de to también se incluye el número final.

@mixin e @include

Con @mixin podemos definir estilos que pueden ser agregados con @include en otra parte del código.

Syntax

@mixin heading-text {
  color: #242424;
  font-size: 4em;
}

h1, h2, h3 {
  @include heading-text;
}

CSS

h1, h2, h3 {
  color: #242424;
  font-size: 4em;
}

Con @mixin también podemos pasar parámetros tal y como si fuera una función.

Syntax

@mixin heading-text($color: #242424, $font-size: 4em) {
  color: $color;
  font-size: $font-size;
}

h1, h2, h3 {
  @include heading-text(#111111, 6em);
}

CSS

h1, h2, h3 {
  color: #111111;
  font-size: 6em;
}

Acerca de Darío Rivera

Author

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.