C’est quoi SASS et pourquoi pas ?

Attention, pour ceux qui cherche une solution simple et rapide pour obtenir des thèmes compatibles avec Bootstrap, je vous conseille vivement de visiter le site de Bootswatch ainsi que la vingtaine de thèmes prêts à l’emploi sur Bootstrapcdn.

Avant propos

Je ne suis pas une usine à site Web, je travaille sur des projets très personnalisés et même si je trempe dans le CSS quotidiennement, c’est davantage dans un contexte de création que de récupération. D’autre part, les bidules de toute sorte sont légion sur le Web, à la mode du moment, et aucun programmeur ne peut tout utiliser et encore moins tout apprendre en une seule vie. Écouté, j’ai un nom rare comme de la marde de pape et pourtant il y a un langage de programmation que je ne connais absolument pas qui porte mon nom : Django !! Faut le faire !

Il faut donc faire des choix, parfois obligatoires, comme Google, parfois difficiles comme Facebook. L’expression « don’t repeat yourself » c’est bien beau, mais depuis le fortran et le Cobol, c’est fou le nombre de fois où j’ai dû réinventer la roue, ne serait-ce pour suivre les incroyables innovations du Web. Pas la peine de vous dire que ma librairie Pascal pleure toute seule sur sa disquette ! En programmation il y a « 3 lois » qui sont plus que jamais importantes sur le Web : optimiser, réutiliser et portabilité. Mais encore faut-il faire la part des choses. J’ai commencé plusieurs projets pour générer du CSS, le besoin existe depuis toujours. À part quelques calculs de variations de couleurs, rien de compliquer, mais tellement gros, tellement de variantes d’un site Web à l’autre que j’ai toujours fini par abandonner ces projets. Pour quatre raisons :

Qu’est-ce qu’il y a de compliquer à remplacer en masse, dans plusieurs fichiers s’il le faut, les couleurs de base d’un site Web. Tous les éditeurs de code le font, pourquoi perdre du temps avec ça ? Personnellement, j’ai un petit fichier CSS qui permet rapidement de modifier les couleurs de la plupart de mes composantes (cadriciel, carrousel, menu...). Une affaire de rien... C’est d’ailleurs ce fichier CSS globale que j’ai convertie en fichier SASS.
Par exemple, pourquoi dynamiser la police de caractère ? Après des années de recherche, on a trouvé la ou les polices de caractère parfaites. À part une police plus sophistiquée pour un titre, tout le monde utilise pour le texte les « Source Sans Pro », « Open Sans » ou « Lato ». Et que dire des « points d’arrêt » (breakpoint) d’une grille ? S’il n’y a aucun inconvénient à changer la largeur minimum du conteneur Bootstrap, c’est un désastre au niveau de la compatibilité de modifier les breakpoint et pourtant c’est précisément ce que permet SASS.
Tout change tellement rapidement, on travaille sur un site et boum, le JavaScript change, Google innove, on passe au CSS3, Bootstrap change radicalement de direction. Tout est toujours à refaire anyway ! Pourquoi perdre mon temps à apprendre le SASS et surtout son environnement particulier auparavant quasi inaccessible ! D’ailleurs, le CSS3 permet maintenant des variables ou des fonctions mathématiques... De là à calculer des variations de teinte des couleurs, il y a une marge, mais tout de même, j’ai toujours pu m’en passer sans aucun problème !
Enfin, SASS est issu d’un monde en soi, je ne sais pas comment le nommer, mais c’est un monde idéaliste et réservé. Parfois, je me demande si c’est autre chose que du développement sans usage pratique, s’ils font réellement des sites Web ; -) Bon, il est vrai que SASS fut longtemps inaccessible pour ces mêmes raisons. Tout se faisait manuellement, que des lignes de commande dans le DOS Shell comme si on était au moyen âge. C’est cool, c’est quasiment une confrérie, mais ajouter à cela les dépendances tout aussi inaccessibles, c’est à n’y rien comprendre. La programmation c’est certes de la récupération mais encore faut il en avoir besoin.

Avoir confiance en une technologie

J’exagère, ce monde est aussi l’avenir avec ou sans ses vieux habits. Leur secret n’est pas le DOS Shell ou une obscure thèse de doctorat ! Mais bien le parfait et naturel mariage du HTML/CSS avec les langages scripts comme le JavaScript et ce tant coté client que sur un serveur ! Qu’on pense au Node.js ! Ce n’est pas mêlant, je n’aurais pas perdu mon temps avec les langages serveur conventionnels il y a 20 ans si Node.js avait existé à l’époque... Et que dire du fantastique node-webkit ! Même si ce n’est pas toujours pas à la portée du premier venu, c’est l’avenir du programmeur sérieux. À ne pas en douter.

Bien sûr apprendre quelques mots d’une langue est une chose, maitriser un nouveau langage dans un environnement différent en est une autre. Un temps d’apprentissage plus ou moins considérable. Pour ceux qui comme moi on travaillé avec tellement de langages aujourd’hui mort, pensez à l’ActionScript, c’est un pensez-s’y bien ! Il y a le développement et la production, deux choses fort différentes même si le dictionnaire français ne fait pas encore la distinction entre les deux mots ! Dans le cas qui nous occupe des préprocesseurs CSS, le langage SASS passe haut la main le test, il est là pour rester.

Enfin, l’argument que SASS demande plus de travail de développement me semble un peu exagéré. Une fois bien organisé, c’est absolument faux. Au lieu de modifier votre fichier CSS, vous changer tout simplement le fichier SASS qui se recompile automatiquement. Même le dépôt FTP peut être automatique. Ceci dit, mal organisé ce n’est jamais facile, particulièrement en programmation et avec ce genre de technologie. Mais une fois adopté, ce n’est pas seulement le SASS, mais tout un monde qui vous ouvre les bras!

SASS (Syntactically Awesome Style Sheet)

Je suis extrêmement heureux de vous parler du langage SASS (Syntactically Awesome Style Sheet). Heureux parce que malgré mes nombreuses réticences, il y a longtemps que je n’avais pas été aussi séduit par une technologie. Le langage SASS est un préprocesseur CSS capable de gérer vos projets CSS en générant des feuilles de styles (fichier .css). Le CSS3, est un langage en soi que les navigateurs interprètent. Un peu plus qu’un simple langage de description, il a un rôle essentiel dans la construction de l’ensemble organique que constitue la page HTML moderne. Une page Web ça vit, ça galère, ça n’a rien à voir avec mon vieux PC et ma vieille chaise ! D’ailleurs, mon travail ne consiste pas à générer des pages Web en temps réel, c’est le serveur qui fait ce travail, moi j’ai d’autres chats à fouetter ; -) Et Dieu merci, les navigateurs n’interprètent pas les types de fichiers .sass ou .less. Chacun son métier et les vaches seront bien gardées comme on dit. Le JavaScript est précisément là pour manipuler le DOM d’une page Web en temps réel ! Alors que le langage SASS est là pour développer des outils de développement en amont, bien au chaud dans ma cabane !!

Un langage comme le SASS m’aide donc à créer des feuilles de styles personnalisées à l’aide de variables, de directives, de fonctions et d’autre langage dérivé comme Mixins, sans plus. Ceci dit, l’avantage que m’apporte vraiment le SASS, à la merci d’un logiciel, c’est surtout l’indépendance entre les fichiers CSS et les fichiers SASS digérés par l’application. Au bout du compte, c’est toujours les mêmes fichiers CSS ! Vous n’avez rien à modifier, tous se gèrent en parallèle, dans des copies de vos fichiers CSS écrites en SASS (.scss) et ce dans l’éditeur de votre choix. Zéro risque, une petite installation, le vrai bonheur ! Au plus un fichier config, un fichier de variables, et un minimum de «structure».

Et combien d’avantages ! De la personnalisation avec des variables, mais aussi de la réutilisation de code, la combinaison, la simplification, la normalisation, l’ajout de préfixe et la compression automatique... Un autre aspect intéressant, c’est la grande quantité de scripts et de bibliothèques disponibles sur le Web (Compass, Bourbon, Breakpoint, Susy...), pour ne citer que ceux là.

// Importer une librairie.
@import "compass";

Introduction à la programmation SASS ou SCSS

Généralement, le premier fichier à la racine du dossier est un index qui indique tous les fichiers à inclure ou à « importer » :

// Fichier maitre ou Index maitre.scss
@import "variables";
@import "bootstrap/bootstrap";
@import "perso";
@import "menu";
@import "calendrier";

Premier point important, noter qu’il faut indiquer l’arborescence vers les sous-dossiers, mais qu’il n’est pas nécessaire d’indiquer l’extension (.scss). Aussi, un des fichiers a importé les plus importants, le fichier variable (_variables.scss) n’a pas besoin du souligné (_) comme le nom physique du fichier.

Le fichier _variables.scss contient, comme sont nom l’indique, les variables, toujours précédées par un signe de dollar ($). Même si les variables peuvent être déclarées n’importe où, elles sont souvent rassemblées dans ce fichier. À l’instar du JavaScript, une variable Sass est en principe globale, à moins d’être déclaré à l’intérieur d’un bloc. On ajoute souvent !default au bout d’une variable. Ceci indique d’assigner la valeur seulement si la variable est nulle ou vide. Il sera possible ensuite de donner une nouvelle valeur à la variable, chose impossible sans le !default. Noter dans mon exemple qu’une fois créée une variable peut être utilisée dans l’assignation d’une autre variable :

Les exemples suivants utiliseront le langage Scss. Hé oui, ces deux langages différents ! En gros, la différence entre le Sass et le Scss est que Sass n’a pas besoin de point virgule ; ni d’accolades {}.

// SCSS
$maCouleur: #c6538c;
$maBordure: rgba($maCouleur, 0.88)

.alert {
  border: 1px solid $maBordure;
}

// RÉSULTAT CSS
.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

Les variables Sass, comme tous les identificateurs Sass, traitent le tiret (-) et le souligné (_) comme étant le même caractère. $font-size et $font_size font tous deux référence à la même variable. Un vestige historique des tout premiers jours de Sass alors qu’il n’autorisait que les soulignés dans les noms d’identifiants. Une fois que Sass a ajouté la prise en charge des tirets pour correspondre à la syntaxe CSS, les deux ont été rendus équivalents pour faciliter la migration.

Combinaison de classes

Un des irritants du métier de programmeur c’est la répétition des gestes, le sacrosaint copier-coller. Créer un style implique souvent des redondances de la même classe en plusieurs dérivés, souvent avec une petite différence comme la couleur. Sass permet de combiner le tout dans une seule instruction à l’aide du symbole &. Dans l’exemple suivant, la classe indique de créer plusieurs classes qui combinent chacune plusieurs balises comme la culture du « keep it simple » l’exige. Comme on peut voir, le symbole & sera remplacé par le nom de la classe principale ainsi qu’après chaque virgule. De cette façon, on évite aussi les erreurs :

// Sass
.table {

  &-primary {
    &, > th, > td {
      background-color: $primary;
    }
  }

  &-secondary {
    &, > th, > td {
      background-color: $secondary;
    }
  }

  &-light {
    &, > th, > td {
      background-color: $light;
    }
  }

  &-dark {
    &, > th, > td {
      background-color: $dark;
    }
  }

  &-success {
    &, > th, > td {
      background-color: $success;
    }
  }

  &-info {
    &, > th, > td {
      background-color: $info;
    }
  }

  &-danger {
    &, > th, > td {
      background-color: $danger;
    }
  }

  &-warning {
    &, > th, > td {
      background-color: $warning;
    }
  }
  
}

// Résultat CSS
.table-primary, .table-primary > th, .table-primary > td {
  background-color: #0b9235;
}

.table-secondary, .table-secondary > th, .table-secondary > td {
  background-color: #a6b21f;
}

.table-light, .table-light > th, .table-light > td {
  background-color: #999;
}

.table-dark, .table-dark > th, .table-dark > td {
  background-color: #303030;
}

.table-success, .table-success > th, .table-success > td {
  background-color: #00bc8c;
}

.table-info, .table-info > th, .table-info > td {
  background-color: #3498DB;
}

.table-danger, .table-danger > th, .table-danger > td {
  background-color: #E74C3C;
}

.table-warning, .table-warning > th, .table-warning > td {
  background-color: #F39C12;
}

Ou encore :

// SCSS
.bg-light {
  &.navbar {
    background-color: $success !important;
  }

  &.navbar-light .navbar-nav {
    .nav-link:focus,
    .nav-link:hover,
    .active > .nav-link {
      color: $primary !important;
    }
  }
}

// Résultat CSS
.bg-light.navbar {
  background-color: #00bc8c !important;
}

.bg-light.navbar-light .navbar-nav .nav-link:focus,
.bg-light.navbar-light .navbar-nav .nav-link:hover,
.bg-light.navbar-light .navbar-nav .active > .nav-link {
  color: #0b9235 !important;
}

On peut ajouter un tas de « At-Rules » (@rules), l’importation comme on a vue plus haut. Il y a aussi les modules, comme @mixin et @include pour réutiliser des bout de code. Et bien sûr les instruction, les opérateurs et surtout les fonctions avec arguments :

// SCSS
@function pow($base, $exposant) {
  $resultat: 1;
  @for $_from 1 through $exposant {
    $resultat: $resultat * $base;
  }
  @return $resultat;
}

.aside {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

// RÉSULTAT CSS

.aside {
  float: left;
  margin-left: 64px;
}

Voilà en gros les bases du langage Sass. Vous aurez tous les détails dans la documentation officielle : https://sass-lang.com/documentation.

Alors pourquoi SASS et d’ailleurs pourquoi pas LESS ?

Les choses ont bien changé. D’abord le cadriciel qui, avec le temps, à tout normalisé. Puis, croyez-le ou non, SASS s’apprivoise très facilement grâce à des applications comme Prepros ! Plus besoin d’installation particulière, le DOS Shell est toujours pratique mais il n’est plus indispensable, ni même l’installation de Node.js. L’idéalisme laisse place au sens pratique et il existe aujourd’hui des applications simples et intuitives qui s’installent d’un clic comme toute bonne application (souvent développé avec node-webkit) ! Et même gratuite ! Mon préféré est le simili gratuit Prepros. Alors là tout devient simple, d’autant que le langage n’a rien d’extraordinaire, c’est tout le contraire. Une bonne connaissance du CSS et du JavaScript c’est tout qu’il faut pour profiter du SASS. Et rien ne vous empêche d’y aller à votre rythme. On commence par quelques variables, quelques calculs puis on y ajoute avec le temps d’autres fonctionnalités, comme Mixins par exemple.

Et pourquoi SASS, il y a aussi le LESS (Leaner CSS), Stylus. SASS, au paravent basé YAML, est populaire. Je ne pense pas que ce soit une raison en soi, tous dépens ici de vos habitudes, mais personnellement je suis passé à SASS pour la simple et bonne raison que Bootstrap 4 a laissé tomber LESS au profit de SASS ! Et même que la prochaine version 5 de Bootstrap continuera d’utiliser SASS. Que dire d’autre ! Et pourtant je devrais préférer LESS fait en JavaScript au lieu du SASS fait avec Ruby !

Lire « Sass vs. LESS » par Chris Coyier (CSS-Tricks)
Sass and LESS Preprocessors par Laurence Bradford

Prepros

La plupart des préprocesseurs CSS utilise le DOS Shell pour s’exécuter. C’est d’ailleurs essentiellement ce que fait un préprocesseurs CSS, alors une seule ligne de commande suffit. Ceci dit, qu’il soit question d’un bouton « compiler » ou d’une ligne de commande SASS exemple.sass:exemple.css. Le résultat est le même.

J’utilise Prepros fait par amour en NW.js par Subash Pathak. Premièrement l’application est compatible macOS, Windows et Linux, c’est le génie du Javascript... J’aime aussi la simplicité, la capacité de gérer des projets, de structurer et minifier le code CSS. Prepros permet aussi de compiler du Less, Sass, Scss, Stylus, Jade, Coffeescript et Haml. On peut créer des « Sources map » et des « packages (npm) ». Compiler avec Dart Sass ou LibSass. Sa version gratuite est un peu emmerdante, mais sinon, il fonctionne à merveille avec tout les avantages de la version payante offerte à un prix dérisoire. Au moment d’écrire ces lignes, la version 7 est en préparation. Enfin, Prepros est offert en version sombre, question de sauver la planète ; -)

Télécharger l’application Prepros

La première étape consiste à organiser vos fichiers dans un dossier. Personnellement, j’utilise un simple dossier /CSS/ qui contient tous mes fichiers CSS du site Web avec un sous-dossier /SASS/ qui contient tous mes fichiers Sass. C’est ce dernier dossier qui est organisé en sous-dossier pour éviter de voir en partant tout mes fichiers Sass. D’une part parce que c’est inutile, soit ils ne seront jamais modifiés, soit ils sont ouverts dans mon éditeur préféré, et d’autre part pour améliorer la compréhension. Puisque j’utilise souvent Bootstrap, voilà un exemple de la hiérarchie de mes dossiers Sass :

css
(tous mes fichiers CSS)
-- sass
---- prepros.config
---- _variables.scss
---- maitre.scss
---- bootstrap
------ mixins
------ utilities
------ vendor
---- menus
---- carousel
---- ...

De cette manière, je n’ai jamais à m’embourber dans la litanie de fichier .scss de Bootstrap par exemple et j’ai d’amblé la liste des fichiers importants comme les variables (_variables.scss) et mon index ou fichier maitre (maitre.scss). N’oubliez pas que c’est un simple compilateur et organisateur. Le travail de programmation en Sass ou autre se fait essentiellement dans mon éditeur préféré... Il suffit alors de configurer le projet pour sauvegarder les fichier .css dans le dossier parent (../) :

Ensuite, sachez que le nom du fichier est important, on peut d’ailleurs sophistiquer la configuration à l’extrême. Prepros utilise bien entendu l’extension, par exemple .scss, mais aussi le souligné devant le nom du fichier : _variables.scss. Ce qui indique à Prepros de ne pas compiler automatiquement le fichier sans directive précise. Seuls les fichiers sans souligné devant le nom (_) seront compilé et transformés en fichiers .css. D’autre part, et on le verra plus bas, il n’est pas ne nécessaire d’ajouter le souligner (ni l’extension) lors de l’importation du fichier (@import). Une fois le dossier de votre projet bien structuré, vous êtes prêt à travailler avec Prepros. Vous aurez de toute façon tous le loisir d’apporter des modifications et de peaufiner votre méthode par la suite.

Prepros fonctionne automatiquement à partir de projet. Un projet est en fait un dossier (répertoire) avec un fichier de configuration généré à l’ouverture. Il suffit de carrément glisser déposer votre dossier /SASS/ dans l’application (ou créer un nouveau projet en sélectionnant le dossier) pour qu’ensuite Prepros le digère. Tous fichiers Sass seront automatiquement compilés à la moindre sauvegarde. Ainsi, même les fichiers qui ne sont pas précisément ouverts dans l’application seront compilés. Par compilé, je parle de fichier .sass qui génère un fichier .css.

C’est tout, il suffit ensuite de modifier et sauvegarder n’importe qu’elle fichier du dossier /SASS/ et Prepros recompilera le tout en modifiant les fichiers .css du dossier parent /CSS/. Actualisez votre page HTML pour voir le résultat !

Conclusion

Ce n’est qu’une introduction, le langage SASS s’apparente à la fois au JavaScript et au CSS, alors c’est beaucoup plus et surtout ça peut devenir fort complexe. Mais avec ce petit tutoriel, vous serez en mesure de créer vos propres librairies SASS pour optimiser vos projets Web. Commencez par un petit projet et vous serez emballé. D’autre part, à peu près toutes les composantes gratuites du Web offrent des fichiers SASS pour modifier les styles. À commencer par Bootstrap. C’est une excellente façon d’apprendre ce langage. Je peux vous garantir que vous ne le regretterez pas et que vous ne cesserez plus jamais d’utiliser SASS car il ne risque pas de disparaitre avant longtemps, croyez-moi!

Références

Langage Sass
Thêmes Bootswatch
Thêmes Bootswatch sur Bootstrapcdn
CodeKit (pour macintosh)
Compass.app par Handlino Inc.
Crunch! (pour LESS) par Matthew Dean/Matt Kump
Fire.app par KKKBox
Koala fait en NW.js est pas mal, il compile aussi du Less, Sass, Compass and CoffeeScript
LESS Compiler (pour LESS)
Live.js par Martin Kool
LiveReload par Andrey Tarantsov
SASS Compiler
Scout-App par Jared Wilcurt
SiteFlow par witiz
Squeezer par InSili.co