Reglas anidadas y atributos Sass

Reglas anidadas de Sass

Sass le permite anidar selectores de CSS de la misma manera que HTML.

Vea este ejemplo de código Sass para la navegación del sitio web:

Gramática SCSS:

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

Tenga en cuenta que en Sass:ul、li y a El selector está anidado en nav en el selector.

Mientras que en CSS, las reglas se definen de manera explícita (no anidadas):

Sintaxis de 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;
}

Debido a que puede anidar atributos en Sass, es más claro y más fácil de leer que el CSS estándar.

Atributos anidados de Sass

Muchos atributos de CSS tienen el mismo prefijo, por ejemplo:

• font-family
• font-size
• font-weight
• text-align
• text-transform
• text-overflow

Al usar Sass, puede escribirlos como propiedades anidadas:

Gramática SCSS:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

El traductor Sass convertirá el código anterior en CSS común:

Salida de CSS:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;