Sass

Signifie « Syntactically Awesome Style Sheets ». Sass est une extension des feuilles de style en cascade (CSS), le langage utilisé pour définir la mise en page et le formatage des documents HTML. Il utilise une syntaxe CSS entièrement compatible, mais offre des fonctionnalités supplémentaires, comme les variables CSS et les règles imbriquées, qui rendent le CSS plus efficace et plus facile à modifier.

L'un des inconvénients du CSS standard est qu'il ne prend pas en charge les variables. Par exemple, si plusieurs styles utilisent la même couleur, vous devez définir cette couleur séparément pour chaque style. Si vous décidez de changer la couleur, vous devez la modifier pour chaque occurrence dans le document CSS. Avec Sass, vous pouvez définir la couleur comme une variable et affecter cette variable à chaque style qui l'utilise. Si vous décidez de changer la couleur, vous n'avez besoin de la modifier qu'une seule fois — à l'endroit où elle est définie initialement dans le document.

L'exemple ci-dessous montre comment définir et utiliser une variable CSS dans Sass.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass prend également en charge les règles imbriquées, ce qui permet aux développeurs d'écrire du code plus efficace. Dans l'exemple ci-dessous, la classe .button est imbriquée dans le style #top p.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

Une fois compilé, le code ci-dessus produit le CSS suivant :

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Bien que Sass offre plusieurs avantages aux développeurs web, les documents Sass ne sont pas reconnus par les navigateurs web. Par conséquent, un fichier Sass doit d'abord être compilé en CSS avant d'être utilisé dans un document HTML. Cette opération peut être effectuée localement avant de téléverser le CSS sur le serveur web à l'aide d'un programme comme Compass.app ou Koala. Il est également possible de le compiler sur le serveur à l'aide d'un script PHP ou Ruby qui compile Sass en CSS.