Toupet

Signifie "Des feuilles de style génial sur le plan syntaxique". Sass est une extension de les feuilles de style en cascade (CSS), la langue utilisée pour définir la mise en page et le formatage des HTML documents. Il utilise des CSS entièrement compatibles syntaxe, mais offre des fonctionnalités supplémentaires telles que des variables CSS et des règles imbriquées qui rendent CSS plus efficace et plus facile à modifier.

Un des inconvénients du CSS standard est qu’il ne supporte pas les variables. Par exemple, si vous avez plusieurs styles de la même couleur, vous devez définir la couleur séparément pour chaque style. Si vous décidez de changer la couleur, vous devez la changer pour chaque instance du document CSS. Avec Sass, vous pouvez définir la couleur en tant que variable et l'affecter à chaque style qui l'utilise. Si vous décidez de changer la couleur, il vous suffit de la changer une seule fois, là où elle a été initialement définie 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, permettant aux développeurs d'écrire du code plus efficace. Dans l'exemple ci-dessous, le .bouton la classe est imbriquée dans le #top p de style.

#top p
{
couleur: #004D40;

.bouton
{
couleur de fond: #039BE5;
couleur: #FFF;
}
}

Date d'arrivée compilé, le code ci-dessus produira le code CSS suivant:

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

Bien que Sass offre plusieurs avantages à développeurs web, Les documents Sass ne sont pas reconnus par navigateurs web. Par conséquent, un fichier Sass doit d'abord être compilé dans CSS avant de pouvoir être utilisé dans un document HTML. Cela peut être fait localement avant de télécharger le CSS sur le serveur Web en utilisant un programme comme Compass.app or Koala. Il peut aussi être compilé sur le serveur en utilisant un PHP or Ruby script qui compile Sass en CSS.