Qu’est ce que Sass – Introduction et présentation

Présentation et états des lieux

Depuis l’apparition des feuilles de styles CSS, il a toujours été frustrant de ne pas pouvoir coder à la manière de certains autres langages tels que JavaScript ou PHP, (pour ne citer qu’eux), et donc, de rester cantonner à un langage de description de type propriétés / valeurs.

Bien que le w3c ait réfléchit à adopter certaines notions telle que les variables CSS, ou les notations fonctionnelles les recommandations et leur prise en compte par les navigateurs sont restées peu réactives.

C’est un peu en réponse à ces propositions peu nombreuses que sont entrés en scène diverses familles de préprocesseurs CSS, tels que, Sass, Less, Stylus, PostCSS, CSSNext, Closure Stylesheets, CSS Preprocessor ou encore Rework.

Le principe des préprocesseurs

Le principe du préprocesseur est simple, il s’agit d’écrire les feuilles de styles au travers d’une syntaxe plus proche d’un vrai langage de programmation, que d’un langage de description.

C’est-à-dire, en employant des variables, des directives qu’elles soient de condition, de boucles ou de contrôle, des fonctions, et parfois même en s’appuyant sur des structures propres à la programmation objet, comme l’héritage, l’encapsulation ou encore le polymorphisme.

Puis, la finalité est de pouvoir rapidement compiler tout cela, que cela soit coté serveur, ou coté client, en feuilles de styles CSS standard, qui seront directement interprétables par les navigateurs, et autres périphériques.

Cette approche apporte une grande souplesse de développement, mais aussi de déploiement, de maintenance et d’évolution. En fonction de notre environnement de production, nous pouvons opter pour tel, ou tel, préprocesseurs afin qu’il puisse répondre au mieux au contexte, et, à la situation.

En ce qui concerne le choix du préprocesseur, pour illustrer les articles qui vont suivre, et sans volonté d’ouvrir une quelconque polémique, nous opterons pour un des plus populaires et des plus puissants, Sass.

Cependant, et quel que soit votre choix, le principe d’utilisation que l’on va aborder, reste portable et devrait s’adapter à l’identique.

Sass vs Sass

On entend souvent parler de Sass, mais aussi de Sass ou encore de SCSS. Qu’en est-il ? et existe-t-il une différence entre ces trois diverses appellations ?

Alors, c’est très simple, d’une part lorsqu’on parle de Sass (pour Syntactically Awesome Stylesheets), nous parlons du langage en lui-même, et ce langage s’appuie sur deux syntaxes d’écriture qui sont respectivement Sass, plus proche de celle employée par ruby, et SCSS (Sassy CSS), qui elle est plus proche de l’écriture traditionnelle des CSS.

$couleur: #363
.uneclasse
    color: $couleur

$couleur: #363;
.uneclasse {
    color: $couleur;
}

.uneclasse {
    color: #363;
}

Ensuite, cela n’est qu’une question de choix personnel, et aussi, de contexte d’utilisation… En clair, si on développe sous Ruby, avec rails, on optera plus facilement pour Sass, si par contre on travaille sur du web en traditionnel HTML/CSS, et qu’on reprend fréquemment des sites déjà existant on s’orientera alors plus facilement vers SCSS.

Bien que les deux puissent être employées conjointement dans un même projet, les deux syntaxes ne peuvent pas cohabiter au sein d’un même fichier, qui usera forcement d’une extension en *.scss, ou en *.sass.

Sass n’est pas seul, il peut s’étendre

L’environnement de travail, ainsi que les outils employés, vont forcément différer que l’on travaille en application PHP, par exemple sous Symphony, Laravel, Zend, Cake ou autres, ou dans un cadre plutôt orienté client, avec des approches purement HTML, JavaScript.
De manière générale, et quelques soit l’environnement de travail, nous pouvons ajouter un ensemble de compléments, appelés aussi bien extensions, que plugins ou encore librairies, et, qui vont venir étendre les capacités natives de Sass.
Parmi les plus populaires, vous trouvez Compass, Bourbon, Sprite factory, Breakpoint, Susy, CSS Sprite, Typesettings, Scut, Buttons, Saffron, Andy… mais en surfant, ou en googlant, sur le sujet, vous en trouverez bien d’autres.
Ces ajouts s’utilisent très simplement, généralement en les installant sous l’environnement de production, et, en les importants au sein du document principal utilisé par Sass.

  @import "compass";
  @import "susy";
  @import "breakpoint";

Nous explorerons davantage, et démontrerons comment les installer et les utiliser, dans un prochain article.