Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms.

Sass est un préprocesseur CSS. C’est un outil qui vous permet d’écrire du CSS, avec une syntaxe différente.

Prenons ce code CSS :

.nav {
  text-align: right;
}
 
.nav .nav__link {
  font-size: 15px;
  padding-left: 30px;
}
 
.nav .nav__link .nav__link--purple {
  color: #a5b4fc;
}

Et si je vous dis, que grâce à Sass, on pourrait le réécrire comme ceci :

.nav {
    text-align: right;
    .nav__link {
      font-size: 15px;
      padding-left: 30px;
      .nav__link--purple {
          color: #a5b4fc;
    }
  }
}

Oubliez la syntaxe pour le moment, on y viendra. Observez plutôt la façon dont le code est imbriqué. En le lisant, on comprend que .nav__link appartient à nav, vous ne trouvez pas ? Exactement comme en HTML ! Eh bien, c’est une des fonctionnalités de Sass : le nesting.

Pourquoi on ne code pas directement comme ça, alors ?

Coder en utilisant une syntaxe plus cohérente c’est bien pratique, le souci c’est que les navigateurs sont incapables d’utiliser Sass en l’état. Pour ça, il vous faut un bon vieux fichier CSS classique… La solution ? Votre code doit être compilé !

Une seconde… compi… quoi ? 🤔

La compilation est un processus qui vous permet de transformer Sass en CSS traditionnel. Voyez ça comme une traduction : la compilation sert à traduire le code Sass en CSS afin que les navigateurs puissent les lire et les utiliser.

Mais attends, du coup on va devoir tout réécrire en Sass dans un fichier .sass ?!

Oh que non ! Sass fonctionne très bien avec le CSS. Copiez votre CSS et collez-le dans un fichier .scss, 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. Il existe deux manières d’écrire du Sass ; on les différencie par leur extension de fichier : .sass et .scss.

La syntaxe .scss s’appuie sur la syntaxe CSS standard ! Comme elle est très proche du CSS, elle nous permet de ne pas être perdus lorsque nous écrivons du CSS. Et ce, tout en bénéficiant de toutes les fonctionnalités Sass, et c’est tout l’intérêt !

En “.scss”, cela donnerait :

.nav {
    text-align: right;
    .nav__link {
        font-size: 15px;
        padding-left: 30px;
        .nav__link--purple {
            color: #a5b4fc;
 
    }
  }
}

Et en .sass , ce serait :

.nav
  text-align: right
 
  .nav__link
    font-size: 15px
    padding-left: 30px
 
  .nav__link--purple
      color: #a5b4fc;

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.

Sass nous donne accès à de nombreuses fonctionnalités pour optimiser et structurer encore plus notre code.

Nous aavons déjà utilisé le nesting : cela consiste à placer un sélecteur dans un autre sélecteur. Voyez par vous-même :

.nav {
    text-align: right;
    .nav__link {
        font-size: 15px;
        padding-left: 30px;
        .nav__link--purple {
          color: #a5b4fc;
    }
  }
}

Les variables vous permettent de stocker des valeurs répétées fréquemment, comme par exemple les couleurs, dans un élément unique que vous pouvez réutiliser à travers l’ensemble de votre code.

$main-color: red;
 
.header {
  background-color: $main-color;
}
 
.footer {
  background-color: $main-color;
}

Ce qui nous donne en CSS :

.header {
  background-color: red;
}
 
.footer {
  background-color: red;
}

Si les variables vous permettent de stocker des valeurs, les mixins stockent plusieurs valeurs !

mixin shadow {
    text-shadow: 10px 10px red;
}
 
.nav {
    color: white;
    @include shadow;
}

Ce qui nous donnera en CSS :

nav {
  color: white;
  text-shadow: 10px 10px red;
}

Sur CodePen, nous avons prédéfini SCSS comme préprocesseur par défaut, seulement lorsque vous créez ou utilisez un pen, aucun préprocesseur n’est présélectionné. Si vous souhaitez pratiquer librement, vous pouvez définir Sass ou SCSS comme préprocesseur à utiliser. Cliquez sur l’icône paramètres. ⚙️

Sélectionnez Sass ou SCSS, puis cliquez sur le bouton Save & Close en bas de la page. Dans Pen Settings, le langage CSS est sélectionné. Dans CSS Preprocessor, SCSS est sélectionné dans le menu déroulant. L'option Neither est cochée dans Vendor Preffixing. Le bouton Save and Close est en surbrillance en bas de la page Définir SCSS ou Sass comme préprocesseur sur Codepen À vous de jouer !

Depuis ce CodePen, reprenez votre barre de navigation du chapitre précédent, et passez votre code CSS en Sass !

Vérifiez vos réponses avec la correction dans ce CodePen. En résumé

  Les préprocesseurs CSS vous permettent d’imbriquer votre code (on appelle ça le nesting) pour créer une hiérarchie plus facile à lire, et regrouper des morceaux de code entre eux.

  Il existe plein de préprocesseurs, mais le plus courant est Sass.

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

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

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

  Le code Sass doit être compilé en CSS pour que les navigateurs puissent le lire et l’utiliser.       

◁ Précédent | ⌂ Retour au sommaire | Suivant ▷