Règles imbriquées et attributs Sass

Règles imbriquées Sass

Sass vous permet d'imbriquer les sélecteurs CSS de la même manière que le HTML.

Veuillez voir l'exemple de code Sass pour la navigation sur ce site :

Syntaxe SCSS :

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

Veuillez noter que dans Sass,ul、li et a le sélecteur imbriqué dans nav dans le sélecteur.

Dans le CSS, les règles sont définies de manière définie (pas imbriquées) :

Grammaire 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;
}

Comme vous pouvez imbriquer des propriétés dans Sass, il est plus clair et plus facile à lire que le CSS standard.

Propriétés imbriquées Sass

De nombreuses propriétés CSS ont le même préfixe, par exemple :

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

En utilisant Sass, vous pouvez les écrire en propriétés imbriquées :

Syntaxe SCSS :

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

Le traducteur Sass convertira le code suivant en CSS ordinaire :

Sortie CSS :

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