Simplifiez-vous le CSS avec Sass

Comparez CSS et Sass

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.

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é !

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.

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.

Analysez la syntaxe

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.

Découvrez les fonctionnalités de Sass

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

Le nesting

Sans le savoir, vous avez déjà utilisé le nesting ! Si si, je vous assure : le nesting 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

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;

}

Les mixins

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.

À 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.       

Il est temps de faire un point et de revenir sur tout ce que vous avez appris avec le quiz de fin de section ! Je vous retrouve dans la partie suivante où nous utiliserons Sass pour optimiser votre code.