CSS

Pre-procesadores

Una web puede tener muchos estilos, que deberán ser consistentes cuando cambien. Para facilitar su mantenimiento, se han creado herramientas que permiten escribir las reglas de forma más modular o programática. La más usada es Sass que utiliza la sintaxis SCSS (.scss) para extender el lenguaje CSS. Los navegadores solo entienden CSS, por lo que para usar estas extensiones es necesario pre-procesar (o compilar) sus ficheros y convertirlos a CSS antes de desplegar la web1.

Algunas de las características de Sass son similares a otras de CSS:

Variables SCSS 
/* SCSS */
$fuente-principal: Helvetica, sans-serif;
p { font: 100% $fuente-principal; }
Variables CSS 
/* CSS */
html { --fuente-principal: Helvetica, sans-serif; }
p { font: 100% var(--fuente-principal); }
Selector de hijos SCSS 
/* SCSS */
nav {
  li { display: inline-block; }
}
Selector de hijos CSS 
/* CSS */
nav li { display: inline-block; }
Módulos SCSS 
/* SCSS: hay otro fichero _base.scss */
@use 'base';
/* Aquí otras reglas SCSS */
Módulos CSS 
/* CSS: hay otro fichero base.css */
@import 'base.css';
/* Aquí otras reglas CSS */
Herencia SCSS 
/* SCSS */
%message-common {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}
.mensaje {
  @extend %message-common;
}
.exito {
  @extend %message-common;
  border-color: green;
}
.error {
  @extend %message-common;
  border-color: red;
}
Herencia CSS 
/* CSS */
.mensaje, .exito, .error {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}
.exito { border-color: green; }
.error { border-color: red; }
Operaciones SCSS 
/* SCSS */
$ancho-inicial: 30em;
div { width: $ancho-inicial + 2em; }
Operaciones CSS 
/* CSS */
html { --ancho-inicial: 30em; }
div { width: calc(var(--ancho-inicial) + 2em); }

Estas otras características solo son posibles gracias al pre-procesado:

Interpolación SCSS 
$pantallas-peq: 36em;
@media (max-width: #{$pantallas-peq}) {
  /* reglas para pantallas pequeñas */
  p { font-size: 150%; }
}
Mixins SCSS 
@mixin theme($theme: darkgray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}
.info { @include theme; }
.alerta { @include theme($theme: darkred); }
.exito { @include theme($theme: darkgreen); }
Funciones SCSS 
@function mas-verde($color) {
    @return $color + rgb(0,50,0);
}
p { background: mas-verde(gray); }
Directivas de control 
$debug: true;
article {
    color: black;
    /* Para comprobar el diseño resaltando los bordes */
    @if ($debug) { border: 1px dotted red; }
}

<body>
<p>Este es un ejemplo de SCSS con el que puedes jugar directamente sin necesidad de compilar a CSS gracias a que la plataforma Codepen.io lo compila por ti. El mixin de ejemplo llamado "ellipsis" crea bloques de texto del ancho y número de líneas indicado. Si el contenido ocupa más que el número de líneas indicado, el texto se acorta y se muestra una elipsis ("…").</p>
</body>
@mixin ellipsis($lineas: 1, $ancho: 100%) {
  width: $ancho;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: $lineas;
  -webkit-line-clamp: $lineas;
  -webkit-box-orient: vertical;
}
/* 
2 líneas como mucho, de ancho 20rem 
*/
p { 
  @include ellipsis($lineas: 2, $ancho: 20rem);
}
1

Esto implica tener un sistema de construcción del proyecto que automatice la generación de los CSS finales.