Du CSS efficace avec Sass : Boostez vos feuilles de style !

Depuis que j’ai commencé mon projet avec ionic j’ai dû apprendre à utiliser les langages fournis par le framework pour programmer. L’un d’entre eux est Sass.

Sass est une extension du CSS qui permet de lui rajouter des “super pouvoirs”. Il permet entre autre d’appliquer des styles de façon hiérarchique comme du html, ou de stocker des valeurs dans des variables. De quoi nous épargner de nombreuses lignes tout en rendant nos fichiers de style plus lisibles !

Après l’avoir utilisé un peu pour mon projet, j’ai décidé d’aller regarder ce que Sass permettait plus en détail, et c’est ce que je vais partager avec vous aujourd’hui !

Installer Sass

Sass nécessite d’être installé à l’aide de Ruby, il existe aussi des implémentations dans d’autres langages.

Une fois Ruby installé il suffit d’entrer la commande suivante dans un terminal:

1gem install sass

Puis de vérifier que l’installation est réussie si la commande suivante fonctionne:

1`sass -v

Utiliser Sass

Une fois installé, il est possible d’écrire des fichiers d’extension .scss qui seront ensuite compilés en .css grâce à Sass.

La commande suivante permet de compiler un fichier .scss pour et de créer un fichier css compréhensible par le navigateur:

1sass fichierSass.scss fichierCss.css

Cependant c’est rapidement lourd de compiler à chaque changement, il existe donc un moyen d’observer tous les fichiers Sass d’un dossier afin de créer les fichiers CSS dans un autre dossier à chaque modification.

1sass --watch style/sass:style

Ainsi tous les fichiers .scss contenus dans le répertoire style/sass/ seront automatiquement convertis dans le répertoire style/ .

Les variables et la hiérarchie

Sass permet d’organiser ses feuilles de style de façon beaucoup plus efficace grâce aux variables et à la hiérarchie des règles. Cela permet d’éviter énormément de répétition !

Pour créer une variable avec Sass il suffit de préfixer le nom de la variable avec le caractère ”$“.

1$couleurPrincipale: #FF0000;
2
3p {
4border: 2px solid $couleurPrincipale;
5}
6
7p strong {
8background-color: $couleurPrincipale;
9}

Ainsi si je veux changer le style de mon site dans le futur. Changer uniquement la variable $couleurPrincipale change l’apparence globale sans avoir besoin de modifier la valeur de la couleur partout dans le fichier !

Mais on peut encore simplifier le code ci-dessus en réarrangeant la hiérarchie comme dans du code HTML. Ici on veut que les balises strong imbriquées dans un paragraphe aient un fond rouge. Et bien imbriquons alors la règle directement à l’intérieur de la règle sur la balise p !

1$couleurPrincipale: #FF0000;
2
3p {
4border: 2px solid $couleurPrincipale;
5
6strong {
7background-color: $couleurPrincipale;
8}
9}

Le résultat est exactement le même que précédemment, mais il est beaucoup plus lisible ! On peut imbriquer des règles dans d’autres plusieurs fois sans problème ! Sass s’occupe de produire un CSS correct correspondant à nos règles !

Voici un autre exemple:

See the Pen KvNZVr by Morgan (@Lheau) on CodePen.

Et après la conversion en css, on aura ce fichier :

1div {
2display: flex;
3justify-content: center;
4align-items: center;
5flex-direction: column;
6width: 80vmin;
7height: 80vmin;
8border: 4px solid #FF0000; }
9div div {
10width: 30%;
11height: 30%;
12border: 2px solid #0000FF; }

L’auto-référence

Il est possible pour une règle de se référencer elle même pour ajouter des spécifications comme des pseudo-classes ou des classes sans avoir besoin de sortir de la hiérarchie.

Il suffit pour cela d’utiliser l’opérateur ”&“.

En reprenant l’exemple précédent:

See the Pen WEoMbV by Morgan (@Lheau) on CodePen.

Du gain de temps avec les mixins

Les mixins sont des groupes de propriétés que l’on peut appliquer à n’importe quelle règle.

Ils permettent de réutiliser des morceaux de code, mais aussi de changer les propriétés en fonction de paramètres passés au mixin.

Dans l’exemple précédent, je centre le contenu des divs avec flexbox. Pourquoi ne pas créer un mixin pour centrer horizontalement et verticalement la cible de n’importe quelle règle ?

1@mixin flex-center() {
2display: flex;
3justify-content: center;
4align-items: center;
5}

J’aimerais aussi pouvoir créer une bordure facilement mais en choisissant ma couleur.

1@mixin big-border($color) {
2border: 4px solid $color;
3}

Il suffit ensuite d’utiliser la directive @include pour utiliser les mixins dans n’importe quelle règle.

See the Pen MvbQpe by Morgan (@Lheau) on CodePen.

L’héritage

Digne des plus grands langages orienté objet, une règle peut hériter d’une autre pour en récupérer toutes ses propriétés.

See the Pen VzmQQE by Morgan (@Lheau) on CodePen.

Les maths

Avec Sass on peut sans problème effectuer des calculs directement dans la feuille de style !

Les opérateurs classiques fonctionnent ensemble et s’associe très bien avec les pourcentages par exemple !

1$taille-reference: 400px;
2$taille-bordure: 3px;
3
4.bloc1 {
5width: ($taille-reference/4) - $taille-bordure;
6}
7
8.bloc2 {
9width: 100px/$taille-reference * 100% ;
10}

Des petites fonctions utiles

Sass possède de nombreuses fonctions utilisables pour nous simplifier encore plus la vie. En voici quelques-unes que j’ai eu l’occasion d’utiliser.

lighten($color, $amount) : Rend une couleur plus claire d’un certain pourcentage.

darken($color, $amount) : Rend une couleur plus sombre d’un certain pourcentage.

ceil($number) : Arrondit à l’entier supérieur.

rgba($red, $green, $blue, $alpha) : Renvoie une couleur à partir des 4 composantes. (Il me semble que cette fonction existe aussi en CSS3).

Pour aller plus loin

Comme d’habitude, le site officiel est bien fourni avec son guide pour débuter et sa documentation.