Reglas y propiedades anidadas de Sass

Reglas anidadas de Sass

Sass te permite anidar selectores CSS de la misma manera que HTML. He aquí un ejemplo de código Sass para la navegación de un sitio.

Ejm

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

Ten en cuenta que en Sass, los selectores ul, li y a están anidados dentro del selector de nav. Mientras que en CSS, las reglas se definen una por una (no anidadas). Su sintaxis CSS sería la siguiente:

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

Propiedades anidadas de Sass

Muchas propiedades CSS tienen el mismo prefijo, como font-family, font-size y font-weight o text-align, text-transform y text-overflow. Con Sass puedes escribirlos como propiedades anidadas.

Sintaxis Sass

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;

El transpilador Sass convertirá lo anterior a CSS normal:

Salida CSS

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;