SCSS y SASS: ¿Un CSS vitaminado? Qué son y cuáles son sus diferencias

CSS es un lenguaje muy amplio con el que podemos hacer infinidad de cosas, pero también tiene sus limitaciones. SCSS y SASS proponen soluciones para algunas de estas limitaciones. En este artículo veremos qué son y sus diferencias. ¡Comenzamos!

¿Qué es SASS?

SASS o Syntactically Awesome Stylesheets, es un preprocesador de CSS que nos permite usar diferentes funcionalidades como variables o funciones, que el CSS estándar no permite. Los archivos SCSS usan la extensión «.sass».

Ejemplo de SASS

Código en CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Código en SCSS

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

¿Qué es SCSS?

SCSS o Sassy CSS, es una sintaxis de SASS, que ofrece funcionalidades como SASS pero con una sintaxis más parecida a CSS estándar. Los archivos SCSS usan la extensión «.scss».

Ejemplo de SCSS

Código en CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Código en SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

SCSS y SASS, ¿Cuál es la diferencia?

La principal diferencia entre SCSS y SASS es la sintaxis. SASS usa indentaciones y elimina la necesidad de llaves » { » y punto y comas » ; «, manteniendo el código limpio. Sin embargo, SCSS, mantiene la sintaxis de CSS, es decir, hace uso de llaves, y punto y coma tras cada declaración. Esto hace que SASS no sea directamente compatible con todas las versiones de CSS standard, mientras que SCSS sí lo es.

Características de SCSS y SASS

Variables

SASS y SCSS permiten almacenar colores, fuentes u otros valores en variables. Esto convierte el código más mantenible y actualizable.

Anidación

Estos lenguajes nos permiten anidar reglas CSS, con una jerarquía visual similar a la de HTML. Esto hace el código más legible y facilita su mantenimiento.

Propiedades anidadas

Además de anidar reglas CSS, estos preprocesadores nos permiten anidar propiedades que pertenecen al mismo conjunto. Por ejemplo podríamos anidar family, size o weight dentro de la propiedad font así:

.definicion_fuente{
 font:{
  family: Lato;
  size: 24px;
  weight: bold;
 }
}

Importaciones

Puedes partir el código en varios archivos e importarlos en el archivo principal, facilitando la organización.

Mixins

Con Mixins podrás crear trozos reutilizables de CSS, eliminando así código repetitivo. Puedes pasar variables a los mixins para crear estilos dinámicos.

Funciones y operaciones

Tienen funciones preestablecidas para usar, y además te permiten crear las tuyas propias. Así tenemos la posibilidad de realizar cálculos y transformaciones complejas directamente desde la hoja de estilos.

Herencias

Con la directiva @extend puedes dar acceso a propiedades CSS de un archivo a otro para eliminar repeticiones.

Bucles y condicionales

Estos lenguajes permiten bucles y sentencias condicionales como if y else.

Ventajas del uso de SCSS y SASS

Fácil de aprender: Si conoces CSS, te resultará fácil aprender, ya que la sintaxis es similar.

Compatibilidad: Son compatibles con todas las versiones de CSS, por lo que podrás usar todas las librerías CSS que quieras. Algunas herramientas o frameworks compatibles son por ejemplo, Bootstrap, Gulp o Bulma.

Ahorro de tiempo: Reduce las repeticiones.

Código reutilizable: Con uso de variables y mixins podrás reutilizar código y ahorrar tiempo.

Organización: Con la utilización de los imports y exports, podrás organizar tu código para un fácil mantenimiento.

Compatibilidad de navegadores: Al compilar a CSS, se añaden los prefijos necesarios para no tener que preocuparnos de la compatibilidad con distintos navegadores.

Ejemplo de uso de funcionalidades

// Definición de variables
$color-primario: #3498db;
$color-secundario: #2ecc71;
$color-texto: #333;
$fuente: 'Helvetica Neue', sans-serif;
$border-radius: 4px;
$separacion: 8px;

// Mapa de colores para temas
$temas: (
  claro: (
    background-color: #ffffff,
    color: $color-texto
  ),
  oscuro: (
    background-color: #333333,
    color: #ffffff
  )
);

// Función para obtener valores del tema
@function tema($nombreTema, $propiedad) {
  @return map-get(map-get($temas, $nombreTema), $propiedad);
}

// Mixin para botones
@mixin button($color, $background, $border) {
  color: $color;
  background-color: $background;
  border: 1px solid $border;
  border-radius: $border-radius;
  padding: $separacion * 2;
  font-family: $fuente;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;

  &:hover {
    background-color: darken($background, 10%);
    color: lighten($color, 10%);
  }
}

// Condicionales para estilos de encabezado
@mixin cabeceras($nivel) {
  @if $nivel == 1 {
    font-size: 2em;
    margin-bottom: $separacion * 2;
  } @else if $nivel == 2 {
    font-size: 1.5em;
    margin-bottom: $separacion * 1.5;
  } @else {
    font-size: 1.2em;
    margin-bottom: $separacion;
  }
}

// Uso de bucles para generar clases utilitarias
@for $i from 1 through 5 {
  .margin-#{$i} {
    margin: $i * $separacion;
  }
  .padding-#{$i} {
    padding: $i * $separacion;
  }
}

// Uso de bucles each para generar paleta de colores
$paleta: (
  "primary": $color-primario,
  "secondary": $color-secundario,
  "success": #28a745,
  "danger": #dc3545,
  "warning": #ffc107,
  "info": #17a2b8
);

@each $nombre, $color in $paleta {
  .text-#{$nombre} {
    color: $color;
  }
  .bg-#{$nombre} {
    background-color: $color;
  }
}

// Estilos generales
body {
  background-color: tema(claro, background-color);
  color: tema(claro, color-texto);
  font-family: $fuente;
  margin: 0;
  padding: 0;

  &.tema-oscuro {
    background-color: tema(oscuro, background-color);
    color: tema(oscuro, color-texto);
  }
}

h1 {
  @include cabeceras(1);
}

h2 {
  @include cabeceras(2);
}

h3 {
  @include cabeceras(3);
}

Conclusión

Como habrás podido ver, SASS y SCSS nos permiten añadir funcionalidades muy útiles a CSS. Mejorando así su legibilidad y mantenimiento entre otras cosas. Y tú, ¿Te animas a probar estos lenguajes?, te leemos en comentarios.