En .sass, dites adieu aux accolades et aux points-virgules ! À la place, elle utilise uniquement des tabulations et des retours à la ligne pour la mise en forme du code.

Les blocs sont nommés en fonction de leur rôle :

Les éléments indiquent le nom de leur bloc parent, suivi d’un dunder (__) puis du rôle de l’élément : form__label.

Les modificateurs utilisent le nom du bloc ou de l’élément qu’ils modifient, suivi de deux tirets (--) et de ce que le sélecteur modifie : button--green.

Les variables

Les variables vous permettent de stocker des valeurs répétées fréquemment, comme par exemple les couleurs et les mensurations, dans un élément unique que vous pouvez réutiliser à travers l’ensemble de votre code.

$color-primary: #15DEA5; //je déclare ma variable
.form__heading {
  width: 100%;
  color: #fff;
  text-shadow: 0.55rem 0.55rem #11af82;
  background: $color-primary; //je l'utilise
}

Les différents types de variables :

• les couleurs
• les chaînes de caractères (strings)
• les nombres
• les listes et maps : des collections de n’importe lesquels des éléments ci-dessus.
• les booléens (boolean), les nulls et les fonctions.

Les mixins

Plutôt que d’être limités à des valeurs, les mixins stockent des blocs entiers de code.

@mixin mixin-name {
  css-property: value;
}

//exemple :
@mixin heading-shadow{
  text-shadow: .55rem .55rem #15DEA5;
}