Sass

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