Conceptos básicos de SASS

Articles

Este artículo explica los conceptos básicos de SASS.

Explicaremos las funciones básicas de SASS paso a paso y mostraremos cómo usarlas con ejemplos prácticos de código.

YouTube Video

Conceptos básicos de SASS

SASS (Syntactically Awesome Stylesheets) es un lenguaje de hojas de estilo que amplía CSS. Al utilizar SASS, puedes aprovechar funciones avanzadas que no están disponibles en CSS, como variables, anidación, mixins y herencia. Esto facilita mucho la gestión y reutilización de las hojas de estilos.

¿Qué es SASS?

SASS es un lenguaje que simplifica la escritura de CSS, permitiendo estilos más flexibles y potentes. SASS también ofrece la sintaxis SCSS (Sassy CSS), que es similar a la sintaxis estándar de CSS. Aquí tienes un ejemplo:.

Ejemplo de SCSS

1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5    font-family: $base-font;
6    background-color: $bg-color;
7}

Ejemplo de CSS

1body {
2    font-family: Arial, sans-serif;
3    background-color: #f4f4f4;
4}

Configuración de SASS

Cómo instalar

Para utilizar SASS, primero instala Node.js y luego instala SASS usando el siguiente comando:.

1npm install -g sass

Cómo compilar

Para compilar archivos SASS (.scss o .sass) a CSS, utiliza el siguiente comando:.

1sass input.scss output.css

También puedes usar la opción watch para monitorear los cambios en los archivos y realizar la compilación en tiempo real.

Variables

SASS te permite usar variables para reutilizar valores como colores y tamaños de fuente.

Código de Ejemplo

1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5    color: $primary-color;
6    font-family: $font-stack;
7}

Este código utiliza variables de SASS para definir colores y fuentes, y las reutiliza dentro del selector body para mejorar la consistencia y el mantenimiento.

Resultado compilado

1body {
2    color: #3498db;
3    font-family: 'Roboto', sans-serif;
4}

Anidamiento

SASS mejora la legibilidad del código al permitir anidar selectores de CSS.

Código de Ejemplo

 1nav {
 2    ul {
 3        list-style: none;
 4        margin: 0;
 5        padding: 0;
 6
 7        li {
 8            display: inline-block;
 9
10            a {
11                text-decoration: none;
12                color: #333;
13
14                &:hover {
15                    color: #3498db;
16                }
17            }
18        }
19    }
20}

Este código utiliza jerarquía anidada para aclarar visualmente la estructura de los estilos.

Resultado compilado

 1nav ul {
 2    list-style: none;
 3    margin: 0;
 4    padding: 0;
 5}
 6
 7nav ul li {
 8    display: inline-block;
 9}
10
11nav ul li a {
12    text-decoration: none;
13    color: #333;
14}
15
16nav ul li a:hover {
17    color: #3498db;
18}

Mixins

Los mixins te permiten reutilizar código en múltiples selectores.

Código de Ejemplo

 1@mixin border-radius($radius) {
 2    border-radius: $radius;
 3    -webkit-border-radius: $radius;
 4    -moz-border-radius: $radius;
 5}
 6
 7button {
 8    @include border-radius(10px);
 9}
10
11.card {
12    @include border-radius(5px);
13}

Este código define un estilo border-radius usando @mixin y lo reutiliza en button y .card con @include, permitiendo un diseño eficiente sin duplicación.

Resultado compilado

 1button {
 2    border-radius: 10px;
 3    -webkit-border-radius: 10px;
 4    -moz-border-radius: 10px;
 5}
 6
 7.card {
 8    border-radius: 5px;
 9    -webkit-border-radius: 5px;
10    -moz-border-radius: 5px;
11}

Herencia (@extend)

La herencia te permite aplicar estilos existentes a otros selectores.

Código de Ejemplo

 1%button-style {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    @extend %button-style;
 9    border: none;
10}
11
12.link-button {
13    @extend %button-style;
14    text-decoration: none;
15}

Este código define un selector placeholder %button-style y utiliza @extend para aplicar estilos comunes tanto a button como a .link-button, promoviendo la reutilización y la consistencia.

Resultado compilado

 1button, .link-button {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    border: none;
 9}
10
11.link-button {
12    text-decoration: none;
13}

Condicionales y bucles

SASS admite condicionales y bucles para generar estilos de manera dinámica.

Ejemplo de sentencia condicional

1$theme: dark;
2
3body {
4    background-color: if($theme == light, #fff, #333);
5    color: if($theme == light, #333, #fff);
6}

Este código utiliza la función if de SASS para cambiar los colores de fondo y texto según el valor de $theme, permitiendo la generación dinámica de estilos mediante condicionales.

Ejemplo de bucle

1@for $i from 1 through 3 {
2    .column-#{$i} {
3        width: calc(100% / $i);
4    }
5}

Este código utiliza un bucle @for de SASS para generar dinámicamente clases desde .column-1 hasta .column-3.

Resultado compilado

 1body {
 2    background-color: #333;
 3    color: #fff;
 4}
 5
 6.column-1 {
 7    width: 100%;
 8}
 9
10.column-2 {
11    width: 50%;
12}
13
14.column-3 {
15    width: 33.3333%;
16}

División e importación de archivos

SASS te permite dividir archivos y reutilizarlos usando @use o @import.

Estructura de archivos

styles/
  _variables.scss
  _mixins.scss
  main.scss

_variables.scss

1$primary-color: #3498db;

_mixins.scss

1@mixin flex-center {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

main.scss

1@use 'variables';
2@use 'mixins';
3
4header {
5    background-color: variables.$primary-color;
6    @include mixins.flex-center;
7}

Resultado compilado

1header {
2  background-color: #3498db;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Resumen

Usar SASS agiliza la escritura de CSS y mejora la reutilización y mantenibilidad del código.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.