Sass

Sass
Desarrollador(es)
Hampton Catlin https://sass-lang.com/
Información general
Apareció en	28 de noviembre de 2006
Diseñado por	Hampton Catlin
Influido por	CSS
Licencia	Licencia MIT

Sass (Syntactically Awesome Stylesheets) es un lenguaje de hoja de estilos en cascada inicialmente diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum.^[1][2] Después de sus versiones iniciales, Nathan Weizenbaum y Chris Eppstein han continuado extendiendo Sass con SassScript, un lenguaje de script simple, usado en los ficheros Sass.

Sass es un metalenguaje de Hojas de Estilo en Cascada (CSS). Es un lenguaje de script que es traducido a CSS, SassScript es el lenguaje de script en sí mismo. Sass consiste en dos sintaxis. La sintaxis original, llamada indented syntax («sintaxis con sangrado») que usa una sintaxis similar al Haml.^[3] Este usa la sangría para separar bloques de código y el carácter nueva línea para separar reglas. La sintaxis más reciente, SCSS, usa el formato de bloques como CSS. Este usa llaves para denotar bloques de código y punto y coma (;) para separar las líneas dentro de un bloque. La sintaxis indentada y los ficheros SCSS tienen las extensiones .sass y .scss respectivamente.

CSS3 consiste en una serie de selectores y pseudo-selectores que agrupan las reglas que son aplicadas. Sass (en el amplio contexto de ambas sintaxis) extiende CSS proveyendo de varios mecanismos que están presentes en los lenguajes de programación tradicionales, particularmente lenguajes orientados a objetos, pero este no está disponible para CSS3 como tal. Cuando SassScript se interpreta, este crea bloques de reglas CSS para varios selectores que están definidos en el fichero SASS. El intérprete de SASS traduce SassScript en CSS. Alternativamente, Sass puede monitorear los ficheros .sass o .scss y convertirlos en un fichero .css de salida cada vez que el fichero .sass o .scss es guardado.^[4] Sass es simplemente azúcar sintáctica para escribir CSS.

La implementación oficial de Sass es open-source y está escrita en Ruby, sin embargo existen otras implementaciones, incluyendo una en PHP para Drupal.^[5]

La sintaxis indentada es un metalenguaje. SCSS es un metalenguaje anidado, lo que es válido en CSS es válido en SCSS con la misma semántica. Sass soporta la integración con la extensión de Firefox Firebug.^[6]

SassScript proporciona los mecanismos siguientes: variables, nesting (anidamiento), mixins, y herencia.^[3] de los selectores.

Sass permite la definición de variables. Las variables comienzan con el signo de dólar ($). La asignación de variables se hace con los dos puntos (:).^[6]

SassScript permite 4 tipos de datos:^[6]

• Números (incluyendo las unidades)
• Strings (con comillas o sin ellas)
• Colores (código, o nombre)
• Booleanos

Las variables pueden ser resultados o argumentos de varias funciones.^[7] disponibles. Durante el proceso de traducción, los valores de las variables son insertados en el documento CSS de salida.^[3]

En el estilo SCSS

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

O el estilo SASS

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

Debe compilar a:

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

CSS soporta anidamiento lógico, pero los bloques de código no son anidados. Sass permite que el código anidado sea insertado dentro de cualquier otro bloque.^[3]

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Debe compilar a:

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Otros tipos de anidado más complejos incluyendo namespace anidamiento y referencias al padre son discutidos en la documentación de Sass.^[6]

CSS no soporta mixins. Cualquier código duplicado debe ser repetido en cada lugar. Un mixin es una sección de código que contiene código Sass. Cada vez que se llama un mixin en el proceso de conversión el contenido del mismo es insertado en el lugar de la llamada. Los mixin permiten una solución limpia a las repeticiones de código, así como una forma fácil de alterar el mismo.^[3]

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

#data {
  @include table-base;
}

Debe compilar a:

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
}

#data {
  float: left;
  margin-left: 10px;
}

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Mientras CSS3 soporta la jerarquía Document Object Model (DOM), este no permite la herencia de selectores. La herencia se logra insertando una línea dentro de un bloque de código que use la palabra clave @extend y haga referencia a otro selector. Los atributos del selector extendido serán aplicados al selector que hace la llamada.^[3]

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

Debe compilar a:

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Sass soporta multiple inheritance (herencia multiple).^[6]

Existen varios grupos de mixins o llamados frameworks que basados en Sass hacen más rápido el crear o aplicar estilos reduciendo la sintaxis.

1. Compass
2. Bourbon

Estos frameworks usan Sass como base y su función básica es resolver el acomodo de diferentes tamaños de pantalla para lograr un diseño responsivo del sitio web.

1. Susy
2. Singularity
3. Bootstrap (a partir de la versión 4)

• Official Sass website
• Haml/Sass source code repository (Git)
• Haml/Sass Google Group
• pyScss, a Python Scss library and client