Live Coding : Introduction à Sass

5 octobre 2019 - : CSS Sass - : 0 commentaire - : 333 - css css3 Sass Scss

Visualisez les fichiers de cette série sur GitHub

Le thème de la semaine est une introduction au langage Sass.

Vous pouvez revoir la session de live coding dans la vidéo ci-dessous ou lire l'article détaillé.

Sass, qu'est-ce donc ?

Sass est un acronyme voulant dire "Syntactically Awesome Style Sheets", traduit en français par "Feuilles de Style Syntaxiquement Extraordinaires".

A l'origine de ce langage, Hampton Catlin et Nathan Weizenbaum voulaient proposer une meilleure façon de gérer les feuilles de style. Ils se sont heurtés à une limite, les navigateurs n'étaient pas prêts à comprendre un autre langage que le CSS.

Pour cette raison, ils ont inventé un langage nécessitant un préprocesseur, programme chargé de traduite le Sass en CSS, compréhensible par les navigateurs.

A l'origine basé sur l'indentation des propriétés, il n'était pas très facile à prendre en main pour les novices qui ne voyaient pas forcément la correspondance entre le Sass et le CSS final.

En conséquence, à partir de la version 3.0, Sass a introduit une nouvelle syntaxe, très proche du CSS, appelée SCSS, qui sera traitée ci-dessous.

Comment utiliser Sass ?

Pour pouvoir utiliser Sass, nous aurons besoin d'un préprocesseur qui traduira notre fichier SCSS en CSS. Il en existe plusieurs, disponibles sur la page officielle de Sass.

Dans ce tutoriel, nous utiliserons Visual Studio Code et l'extension Live Sass Compiler qui va compiler instantanément le code à chaque enregistrement de notre fichier SCSS.

Configurer Live Sass Compiler

Si vous souhaitez utiliser Live Sass Compiler, vous devrez le configurer dans les options de Visual Studio Code.

Vous devrez ouvrir le fichier settings.json en passant par "Fichier/Préférences/Paramètres", puis cliquer sur l'un des liens mentionnant "Modifier dans settings.json"

Dans ce fichier, ajoutez juste avant la dernière accolade, en vous assurant que la ligne précédente se termine par une virgule

"liveSassCompile.settings.formats": [{
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css/"
    },
    {
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": "~/../css/"
    }
],

Cette configuration compilera le SCSS en 2 fichiers, l'un en CSS classique, l'autre en compressé (fichier min), tous deux dans un dossier CSS.

Vous pouvez bien sûr modifier cette configuration en fonction de vos préférences.

Commençons !

Dans toutes les parties qui suivent, nous écrirons notre code dans les fichiers SCSS, contenus dans le dossier "scss" de notre projet. Nous n'irons JAMAIS éditer les fichiers CSS. Ceux-ci seront de toute façon écrasés à chaque compilation.

Notre fichier principal de travail sera donc "/scss/styles.scss".

Les variables

Sass est un langage de programmation. A ce titre, il met à notre disposition la possibilité d'utiliser des variables.

Il nous suffit de déclarer un nom de variable et de lui affecter une valeur de propriété CSS (couleur, bordure, taille de texte...), puis de l'appeler dans notre code.

Ainsi, le SCSS ci-dessous

$primaire: #c3f21c;
$texte: 'Roboto', sans-serif;

p{
    font-family: $texte;
    color: $primaire;
}

Donnera le code CSS suivant

p {
  font-family: "Roboto", sans-serif;
  color: #c3f21c;
}

Vous voyez donc que les noms de variables ont été remplacés par leur valeur lors de la compilation.

De ce fait, si vous souhaitez modifier une couleur, il vous suffira de modifier la valeur de la variable et de recompiler.

Les fichiers partiels

Sass, tout comme le CSS, permet d'importer d'autres fichiers au moyen de la directive @import.

Vous connaissez l'import de fichiers au moyen de ce code

@import url('chemin/fichier.css');

Cette syntaxe reste strictement identique pour l'import de fichiers en SCSS, aucun changement.

Il est cependant possible de découper vos fichiers SCSS en plusieurs parties.

Dans notre exemple, nous allons créer un fichier partiel qui contiendra nos variables.

La convention demande que le nom commence par un underscore (_), nous l'appellerons donc "_variables.scss".

Pour l'importer, nous utiliserons la directive @import de cette façon

// Le compilateur recherchera automatiquement _variables.scss
@import 'variables';

Une syntaxe simple et courte, tout l'intérêt de Sass.

L'imbrication

L'un des grands intérêts de l'utilisation de Sass est la possibilité d'imbriquer les sélecteurs afin d'obtenir une structure très proche de celle de notre page HTML.

Ainsi, si nous avons une balise "span" dans une balise "p", nous pourrons utiliser le code ci-dessous, qui mettra la "span" en caractères gras et le paragraphe entier en taille 16px.

p{
    font-size: 16px;
    span{ // Ici nous indiquons que la balise span se situe dans la balise p
        font-weight: bold;
    }
}

Une fois compilé nous aurons ceci

p {
  font-size: 16px;
}

p span {
  font-weight: bold;
}

Vous avez certainement remarqué qu'un espace a été introduit entre "p" et "span" pour reqpecter la syntaxe CSS. Mais il existe des cas dans lesquels nous ne souhaitons pas cet espace.

Par exemple, si nous souhaitons retirer le soulignement d'un lien non survolé et modifier sa couleur au survol. En CSS, nous souhaitons donc avoir ceci

a {
  text-decoration: none;
}

a:hover {
  color: green;
}

Dans ce cas précis, il n'y a pas d'espace avant ":hover". Nous allons donc devoir préciser à Sass que nous souhaitons "coller" le parent et l'enfant dans la structure imbriquée. Nous avons pour ce faire l'opérateur "&" qui nous permet de répondre à cette contrainte. Le code SCSS correspondant au CSS ci-dessus est donc le suivant

a{
    text-decoration:none;
    &:hover{ // L'opérateur & permet de répéter le sélecteur parent, ici "a"
        color: green;
    }
}

Les mixins

Les "mixins" sont des ensembles de propriétés CSS qui peuvent être utilisées à plusieurs endroits de votre code dans des contextes différents.

Si vous avez des répétitions de propriétés, vous pouvez les rassembler sous la forme d'un "mixin" unique et donc réduire la taille de votre code et faciliter sa maintenance.

Nous allons prendre un exemple simple, mais les "mixins" peuvent contenir de nombreuses propriétés.

Imaginons que nous souhaitions former 3 carrés dans notre page qui auront les tailles de 200, 400 et 500px. En CSS nous allons écrire ceci

#carre1 {
  width: 200px;
  height: 200px;
}

#carre2 {
  width: 400px;
  height: 400px;
}

#carre3 {
  width: 500px;
  height: 500px;
}

Nous répétons donc les propriétés "width" et "height" dans chaque sélecteur, avec des valeurs identiques pour les deux.

Nous allons pouvoir créer un "mixin" que nous appellerons "carre" et qui utilisera une variable contenant la taille du côté.

Le SCSS correspondant est le suivant

// Nous créons un mixin appelé carre qui prend une valeur dans $cote
@mixin carre($cote) {
    width: $cote;
    height: $cote;
}

#carre1{
    // Nous appelons notre mixin avec un cote de 200px
    @include carre(200px);
}

#carre2{
    // Nous appelons notre mixin avec un cote de 400px
    @include carre(400px);
}

#carre3{
    // Nous appelons notre mixin avec un cote de 500px
    @include carre(500px);
}

Il est également recommandé d'utiliser les "mixins" pour simplifier l'utilisation des préfixes.

Ainsi, si nous écrivons ceci

@mixin transform($propriete) {
    -webkit-transform: $propriete;
    transform: $propriete;
}

.box {
    @include transform(rotate(30deg));
}

.box2{
    @include transform(translate(150px));
}

Nous obtiendrons ce CSS

.box {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.box2 {
  -webkit-transform: translate(150px);
  transform: translate(150px);
}

Les extensions

En complément des "mixins" nous avons les extensions, ou "extend", qui permettent de rassembler un certain nombre de propriétés fixes qui se répètent pour plusieurs sélecteurs CSS.

Ainsi, si vous souhaitez centrer parfaitement un élément au dessus d'un autre, plusieurs fois, vous devrez répéter plusieurs propriétés identiques, ou les rassembler en cumulant les sélecteurs comme ci-dessous

#carre1 #carre2, #carre3 #carre4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#carre1 {
  position: relative;
}

#carre3 {
  position: relative;
}

En SCSS, vous allez écrire ceci

// On crée un modèle appelé %centrer
%centrer{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#carre1{
    position:relative;
    #carre2{
        // On appelle le modèle %centrer
        @extend %centrer;
    }
}

#carre3{
    position:relative;
    #carre4{
        // On appelle le modèle %centrer
        @extend %centrer;
    }
}

Les media queries

Nous pouvons, bien sûr, utiliser les media queries avec Sass.

Leur écriture permettra de connaître exactement le contexte dans lequel elles s'appliqueront.

Ainsi, si nous souhaitons modifier la taille de base de la police de caractères en fonction de la résolution, nous écrirons ceci en SCSS

body{
    // Taille de base pour mobile
    font-size: 10px;
    @media screen and (min-width: 768px){
        font-size: 12px;
    }
    @media screen and (min-width: 1200px){
        font-size: 14px;
    }
}

A l'issue de la compilation, le CSS correspondant sera le suivant

body {
  font-size: 10px;
}

@media screen and (min-width: 768px) {
  body {
    font-size: 12px;
  }
}

@media screen and (min-width: 1200px) {
  body {
    font-size: 14px;
  }
}

Les boucles

Nous n'allons pas voir toutes les fonctions incluses dans Sass, mais il en est une qui est intéressante pour les media queries vues juste avant.

Il s'agit des boucles, qui vont nous permettre de définir différentes valeurs en passant plusieurs fois sur les différentes propriétés.

Par exemple, si nous définissons différents breakpoints à 576, 768, 992 et 1200px, et que nous souhaitons un container qui fasse 80% de cette largeur, nous utiliserons donc le code suivant

// Nous définissons les différents breakpoints
$grille: (
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
);

// Nous bouclons sur les breakpoints
@each $nom, $breakpoint in $grille {
    @media (min-width: $breakpoint) {
        .container{
            width: $breakpoint * 0.8;
        }
    }
}

Le CSS généré est le suivant

@media (min-width: 576px) {
    .container {
        width: 460.8px;
    }
}

@media (min-width: 768px) {
    .container {
        width: 614.4px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 793.6px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 960px;
    }
}

Voilà qui termine ce tutoriel, pour approfondir, n'hésitez pas à approfondir en lisant la documentation officielle de Sass.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Ecrire un commentaire