• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 10/20/20

Découvrez Sass et sa syntaxe

Log in or subscribe for free to enjoy all this course has to offer!

Nous avons vu les différents types de préprocesseurs et leurs avantages. Parmi eux : Sass. Il est donc temps de découvrir plus en détail celui-ci.

Pour bien démarrer

Il est temps de se remonter les manches et de plonger les mains dans Sass ! 💪

Nous allons commencer par découvrir la syntaxe de Sass : à quoi elle ressemble et comment l’écrire ; et ce, en pratiquant avec des exercices au fur et à mesure. Cela vous permettra de vous jeter directement dans Sass et de voir les résultats en temps réel, sans avoir besoin pour le moment d’installer quoi que ce soit sur votre ordinateur ! 🌟

Plus tard, vous utiliserez Sass directement sur votre machine : vous allez l’installer et le configurer afin qu’il puisse compiler votre code pour vous permettre de voir vos résultats de la même manière : en temps réel !

Une seconde... compi… quoi ? 🤔

La compilation est un processus qui nous permet de transformer Sass en CSS traditionnel. Votre navigateur est incapable de comprendre Sass dans l’état. En d’autres termes, il nous faut traduire la syntaxe Sass en CSS pour que votre navigateur puisse l’utiliser, et c’est possible en le compilant.

Mais point de panique, jeune padawan, pour le moment nous allons nous concentrer seulement sur la syntaxe de Sass !

Vous pouvez aussi suivre le cours en utilisant votre  IDE (integrated development environment, soit un traitement de texte super sophistiqué) et Sass, ou bien utiliser Codepen : une solution en ligne ! 

Deux manières de faire la même chose

Il existe deux manières d’écrire du Sass ; on les différencie par leur extension de fichier :   .sass  et.scss.

Vous avez déjà du code CSS traditionnel que vous voulez réutiliser ? Aucun problème ! Sass fonctionne très bien avec du CSS. Copiez votre CSS et collez-le dans un fichier  .sass, et le tour est joué. Votre code sera interprété et votre CSS sera exécuté mais ne sera pas transformé en Sass. Pour utiliser Sass, il est important d’apprendre à maîtriser sa syntaxe, car elle vous permet de bénéficier de fonctionnalités qui vont vous permettre d’écrire du code propre, plus organisé et surtout plus efficace.

Jusqu’à présent, tous les petits bouts de CSS précompilés que vous avez vus précédemment dans ce cours ont été créés en utilisant la syntaxe Sass  .scss. Regardez, ça ressemble énormément à du CSS normal, on a juste ajouté un peu de poudre magique Sass par-dessus et voilà le travail :

.nav {
padding-right: 6rem;
flex: 2 1 auto;
text-align: right;
nav__link {
display: inline;
font-size: 3rem;
padding-left: 1.5rem;
nav__link--active {
color: #001534;
}
}
}

La syntaxe  .scss  s’appuie sur la syntaxe CSS standard ! Celle-ci étant très proche du CSS, elle permet aux développeurs de ne pas être perdus lorsqu’ils écrivent du CSS, tout en bénéficiant de toutes les fonctionnalités Sass, et c’est tout l’intérêt !

En CSS, cela donnerait :

.nav {
padding-right: 6rem;
flex: 2 1 auto;
text-align: right;
}
.nav nav__link {
display: inline;
font-size: 3rem;
padding-left: 1.5rem;
}
.nav nav__link nav__link--active {
color: #001534;
}

 Et en.sass, ce serait:

.nav
padding-right: 6rem;
flex: 2 1 auto;
text-align: right;
nav__link
display: inline;
font-size: 3rem;
padding-left: 1.5rem;
nav__link--active
color: #001534;

La syntaxe spécifique à.scss  n’est visible que lorsqu’on commence à utiliser les fonctionnalités Sass, comme les variables identifiée par le préfixe dollar ($) et les fonctions identifiées avec l’arobase (@). 

Nous verrons en détail comment utiliser ces outils plus tard dans ce cours. Pour le moment, ce qu'il est important de comprendre, c’est que vous pouvez appliquer vos connaissances en écriture CSS directement dans Sass avec la syntaxe .scss.

Mais comment faire ? 🧐

Commencez par déclarer le sélecteur, qu’il s’agisse d’une classe, d’un élément, d’un id, etc., puis ajoutez une paire d’accolades entre lesquelles vous mettrez les propriétés et les valeurs nécessaires :

.navbar-content {
color: white;
background-color: white;
}

Et ça donnerait quoi en syntaxe  .sass ?

Voici ce que cela donne en syntaxe  .sass

.navbar-content
color: white
background-color: black

Le .scss ressemble beaucoup à du CSS normal, tandis que le .sass  a une syntaxe plus condensée et concise. En  .sass, dites adieu aux accolades et aux points-virgules ! À la place, elle utilise uniquement des tabulations et des retours à la ligne pour la mise en forme du code. La syntaxe  .sass produit donc une codebase plus propre, mais surtout plus lisible. Sans compter qu’éviter toute cette ponctuation vous permet aussi d’écrire plus vite.

Essayez par vous-même !

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Une même syntaxe pour tous

Entre nous, il est assez rare que vous tombiez sur du .sass. Quand quelqu’un parle de Sass, il parle quasi systématiquement de  .scss. Du coup, vos chances d’écrire du  .scss  dans votre vie professionnelles sont nettement plus élevées. Il est donc logique que nous utilisions  .scss dans ce cours.

À partir de maintenant, nous utiliserons Sass comme un synonyme de  .scss. À chaque fois que nous en parlerons, il s’agira de  .scss et de sa syntaxe.

Utilisez des sélecteurs à l’intérieur d’autres sélecteurs : découvrez le nesting !

Des sélecteurs dans des sélecteurs : Inception

La syntaxe est importante et nous permet d’écrire du code plus organisé ; mais seule, elle n’est pas très efficace et on ne comprend pas trop l’intérêt d’écrire du CSS dans un fichier  .scss. C’est ici qu’intervient le nesting !

De la même façon que vous imbriquez des  <li> dans un  <ul> en HTML, dans Sass vous pouvez imbriquer les sélecteurs ou autrement dit, les nester.

ul {
list-style: none;
text-align: right;
li {
display: inline;
font-size: 3rem;
color: #D6FFF5;
}
}

Maintenant vous avez une hiérarchie de sélecteurs claire qui reflète leur structure HTML. Vos  <li>  sont imbriqués dans le  <ul>, exactement comme ils le seraient en HTML.

Plutôt que d’avoir à parcourir un fichier CSS interminable à la recherche d’un sélecteur particulier et de son ensemble de règles, ce qui équivaut à chercher une aiguille dans une botte de foin, vous  pouvez vous référer à un seul endroit dans votre fichier et voir comment les  <ul>  et leurs  <li>  enfants sont configurés. Au final, vous n’aurez à aller qu’à un seul et même endroit pour faire vos modifications futures.

Plus propre ? Validé. ✅ Maintenable ? Doublement validé. ✅

Regardez le CSS qui en résulte.

ul {
list-style: none;
text-align: right;
}
ul li {
display: inline;
font-size: 3rem;
color: #D6FFF5;
}

Le  <ul> a reçu toutes les règles assignées en dehors du <li> . Et le <li>a reçu les règles qui étaient assignées dans son sélecteur imbriqué. Remarquez qu’au lieu d’avoir créé un sélecteur unique <li>, nous avons créé un combinateur descendant (ou un combinateur parent/enfant). 

Essayez par vous-même !

Dans cet exercice, pratiquez le nesting : placez un sélecteur dans un autre.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Nous avons effectué la forme la plus simple de nesting dans Sass : placer un sélecteur dans un autre sélecteur. Sass compilera toujours ceci sous forme de sélecteurs séparés par des espaces, ce qui, en CSS, correspond à un combinateur descendant.

Maintenant que vous connaissez les principes de base de Sass et comment l’écrire, et que vous vous êtes initié au nesting, il est temps de passer au niveau supérieur en apprenant à utiliser d’autres combinateurs !

En résumé 

  • La syntaxe .scss est très similaire à la syntaxe CSS.

  • On peut utiliser du code CSS préexistant dans Sass en l’intégrant dans un fichier .scss.

  • La syntaxe .sass est plus concise mais .scss  reste plus couramment utilisé.

  • Le nesting permet d’imbriquer les sélecteurs comme en HTML. 

 La syntaxe Sass et surtout le nesting nous permettent de passer un cap dans l’organisation de notre code, mais il existe aussi d’autres combinateurs que nous pouvons utiliser pour améliorer notre code, et c’est ce que nous allons découvrir dans le chapitre suivant.

Example of certificate of achievement
Example of certificate of achievement