Guía de Sass para principiantes
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 -yEste 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 sassEjecució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;
}