Comment configurer son projet Front-end avec SCSS

Écrit par Djilan Mouhous

Vous êtes un développeur front, vous débutez avec SCSS ou vous cherchez simplement des bonnes pratiques à mettre en place pour le gérer le style de votre projet ? Cet article vous détaille en quelques étapes comment configurer simplement SCSS et bien débuter avec ce dernier.

Avant de commencer

Pré-requis

• Maitriser CSS et ses sélecteurs
• C’est tout 😊

CSS, SASS ou SCSS ?

On entend souvent les mots CSS, SASS et SCSS quand les développeurs parlent de style. Ces trois différents langages nous permettent de composer le style de nos sites web. Le CSS est un langage qui peut vite devenir lourd et limité en possibilité. Le SASS ainsi que le SCSS en sont des dérivées, plus puissants avec une syntaxe plus compacte. L’un, SASS utilise une syntaxe sans accolade et sans point virgule. Le SCSS est plus proche de la syntaxe CSS classique car il conserve les accolades ainsi que les points virgules. Cependant comme SASS, il permet de gérer l’encapsulation des éléments pour améliorer grandement la lisibilité et la manière de rédiger les sélecteurs.

Vous trouverez ci-dessous un exemple de code SASS, SCSS et CSS pour comparer rapidement les syntaxes.

.title
padding:10px
background-color:black
h1
@extend .title
font-size: 1em
p
@extend .title
color: red.title {
padding:10px;
background-color:black;
h1 {
font-size:1em;
}
p {
color:red;
}
}.title {
padding:10px;
background-color:black;
}
.title h1 {
font-size:1em;
}
.title p {
color:red;
}

Comment ça marche ?

Avant toute chose, voyons comment comment votre site web peut lire du SCSS (ou SASS). Votre site ne peut PAS lire du SCSS 🤯. Ou plus ou moins, il ne peut pas directement…. En effet, le but de ces langages est de VOUS faciliter la vie, pas celle de votre site qui lui n’a pas d’intérêt à lire du SCSS plutôt que du CSS. Donc, au final ce qu’il se passe pour de vrai, c’est que votre code SCSS est transpilé en CSS. En simple, votre code SCSS est transformé en CSS par un “outil”. Et finalement c’est bien du CSS qui stylise votre site, pas du SCSS. Mais pour vous, c’est bien du SCSS que vous rédigez et non pas du CSS. 🥸

Configuration

Dans cet article nous n’allons pas nous attarder sur l’installation de SCSS dans votre projet. Je pars du principe que vous avez un projet Vue, React ou encore Angular qui embarque déjà un transpilateur SCSS.

La principale règle à mettre en place dans votre style, c’est la séparation du style en plusieurs fichiers. Pour vous donner quelques exemples, on peut envisager un fichier propre aux variables, un propre aux pages, un fichier propre aux composants. Au final, tous ces fichiers sont importés dans un index.scss qui représente le fichier d’entrée de votre style.

Your project/
└── src/
└── scss/
├── index.scss
├── variables.scss
├── mixins.scss
├── components/
│ ├── myComponent.scss
│ └── anotherComponent.scss
└── pages/
├── home.scss
└── anotherPage.scss

index.scss

C’est le fichier central de style en SCSS, c’est lui qui importe tous les autres fichiers pour permettre un seul import dans votre projet.

// Global
@import "./variables";
@import "./mixins";

// Components
@import "./components/myComponent"
@import "./components/anotherComponent"

// Pages
@import "./pages/home.scss";
@import "./anotherPage.scss";

variables.scss

C’est le fichier qui contiendra toutes vos variables de couleurs et de tailles par exemple.

$primary:#5555ff;
$secondary: #555555;
$success: #55ff55;
$danger: #ff5555;

mixins.scss

C’est le fichier qui contiendra les définitions des mixins de votre projet qui sont des fonctions vous permettant notamment de gérer facilement le responsive de votre projet.

@mixin for-phone-only {
@media (max-width: 599px) { @content; }
}

@mixin for-tablet-portrait-up {
@media (min-width: 600px) and (max-width: 1025px) {
@content;
}
}

@mixin for-desktop-up {
@media (min-width: 1500px) { @content; }
}

Exemples d’utilisation des variables et des mixins

.title {
width: 250px;
background-color: $secondary;
color: $primary;
@include for-phone-only {
width: 100px;
}
}

Conclusion

Comme tout projet en informatique l’important est de bien penser le projet avant de le développer et notamment de savoir comment le découper pour faciliter sa maintenance et son développement. Cette règle n’échappe pas au style et comme vous pouvez le voir s’applique très bien au SCSS.