wikinotes

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{tag>cours dev développement web css sass html}}



====== Passez au niveau supérieur avec Sass ======

Notes et transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sass-1#table-of-content|Simplifiez vous le CSS avec Sass]] proposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].


===== 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 :

<code css>
.nav {
  text-align: right;
}

.nav .nav__link {
  font-size: 15px;
  padding-left: 30px;
}

.nav .nav__link .nav__link--purple {
  color: #a5b4fc;
}
</code>

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

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

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.


===== 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 :

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

    }
  }
}
</code>

Et en .sass  , ce serait :

<code sass>
.nav
  text-align: right
  
  .nav__link
    font-size: 15px
    padding-left: 30px

  .nav__link--purple
      color: #a5b4fc;
</code>


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.

<note>
Entre nous, il est assez rare que vous tombiez sur du ''.sass''. Quand on parle de Sass, ce sera souvent du SCSS. Au final, vos chances d’écrire du ''.scss'' dans votre vie professionnelle sont nettement plus élevées. À 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.
</note>


===== 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 ====

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

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


==== 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**.

<code sass>
$main-color: red;

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

.footer {
  background-color: $main-color;
}
</code>

Ce qui nous donne en CSS :

<code css>
.header {
  background-color: red;
}

.footer {
  background-color: red;
}
</code>


==== Les mixins ====

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

<code sass>
mixin shadow {
    text-shadow: 10px 10px red;
}

.nav {
    color: white;
    @include shadow;
}
</code>

Ce qui nous donnera en CSS :

<code css>
nav {
  color: white;
  text-shadow: 10px 10px red;
}
</code>

<note>
Il existe de nombreuses fonctionnalités Sass à découvrir. Mais le but de ce cours étant de vous faire découvrir et pratiquer Sass, et non de vous aider à maîtriser toutes ses fonctionnalités. Nous ne les aborderons donc pas toutes. En revanche, si vous êtes intéressé, pour pouvez accéder à la liste complète via la documentation officielle en anglais :

  * [[https://sass-lang.com/guide|Les bases]]
  * [[https://sass-lang.com/documentation/operators|Les opérateurs]]
  * [[https://sass-lang.com/documentation/modules|Les modules]]
  * [[https://sass-lang.com/documentation/at-rules/extend|Les extensions]]
</note>

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.

{{config_codepen.png}}

Définir SCSS ou Sass comme préprocesseur sur 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.


[[130_clarifier_html_via_bem|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[150_quiz_structurer_son_code|Suivant ▷]]
wikinotes

Outils pour utilisateurs

Outils du site

Outils de la page
