Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Sass

Connaître les deux syntaxes de Sass

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Le langage Sass repose sur deux syntaxes, dont vous allez découvrir les différences essentielles. Ainsi, vous comprendrez le choix de la syntaxe utilisée dans cette formation.

Transcription

Le langage Sass supporte deux syntaxes différentes. La première syntaxe, c'est ce qu'on appelle la syntaxe indentée et ça ressemble à peu près à ceci. C'est la syntaxe historique du langage Sass, donc, c'est la première syntaxe qui existait, on l'appelle également la syntaxe Sass. Elle a l'avantage d'être extrêmement concise, et vous voyez qu'on utilise dans cette syntaxe des retours à la ligne et des tabulations pour délimiter les différents blocs de code. Si je prends le bloc de code qu'il y a ici, comment cela serait-il compilé en CSS, comme ceci. Vous voyez qu'on ajouterait des accolades pour délimiter le style CSS, et des points-virgules à la fin de chaque ligne de code. En fait, au niveau du Sass le simple fait qu'il y ait une tabulation devant « Color: blue » et une tabulation devant « Font-size: 0 » suffit pour que ça se comprenne que ces deux choses-là sont, en fait, des propriétés qui sont en dessous du sélecteur « Main » qui, lui, n'a pas de tabulation. Si on applique la même logique au second bloc de code qui se trouve ici, ce serait compilé de cette façon-ci. C'est-à-dire que maintenant on générait deux styles CSS différents, un pour « a » et un pour « a: hover », et vous voyez également « font-weight » et « font-family », donc, « weight » et « family », ils ont deux tabulations dans le Sass, là où « font » n'en a qu'une. « Weight » et « family » appartiennent à ce bloc « font » qui lui-même appartient à ce bloc A, c'est grâce aux tabulations dans le Sass qu'on peut déterminer ce genre de choses. Cette syntaxe, si vous voulez écrire votre code Sasse comme ceci, vous devrez générer des fichiers avec l'extension « .sass ». Cela dit, cette syntaxe demande un petit peu d'expérience, en effet, on n'est pas vraiment habitué quand on vient du CSS à écrire des styles comme ça, à ne pas écrire d'accolades ou de points-virgules, c'est un petit peu perturbant, ce n'est pas très, très intuitif. Il y a une autre syntaxe qu'on appelle la syntaxe SCSS pour « Sassy CSS » . C'est-à-dire du CSS a la façon Sass et ça s'écrit comme ceci. Alors, là c'est une syntaxe qui est très, très proche du CSS. C'est d'ailleurs, un « Superset du CSS », ça veut dire quoi ? Ça veut dire que le CSS classique est déjà du SCSS. Alors, on utilise ici des accolades qui s'ouvrent, qui se ferment pour séparer les différents blocs de code. Le bloc de code qui est ici, c'est du CSS, si vous regardez bien, ce sera compilé exactement de la même manière. C'est ce que je vous disais précédemment, tout ce qui est déjà CSS, c'est du code Sass valide qui sera tout simplement compilé tel quel dans la feuille de style CSS. Par contre, le second bloc qu'il y a ici, là, vous voyez que ce n'est pas du CSS classique, on a des choses un petit peu particulières, par contre, on utilise des accolades et des points-virgules exactement comme on le fait dans le CSS. Donc, ce serait compilé comme ceci, on générait de nouveau deux styles différents : un pour « a » et un pour « a: hover », comme vous le voyez là. Alors, cette syntaxe, si vous voulez écrire du code Sass comme ceci, vous allez créer des fichiers avec l'extension « .scss », et non plus des fichiers avec l'extension « .sass » comme pour la syntaxe indentée. Au niveau de cette formation, moi, je vais utiliser la syntaxe SCSS, la seconde, que nous avons vu ici, est dans cette vidéo, le « Sassy CSS », en effet, je pense que c'est plus facile à appréhender pour les débutants puisqu'au niveau visuel elle ressemble à ces fors, à ce que vous faites déjà dans CSS, vous ne serez pas pollué par des choses auxquelles vous n'êtes pas vraiment habitué et vous pourrez vous concentrer exclusivement sur les spécificités de Sass, d'ailleurs, c'est cette syntaxe-là également qui est beaucoup plus répandue. C'est cette syntaxe-là qui est utilisée dans la majorité de documentations que vous allez rencontrer sur Internet à propos de ça. Donc, c'est plein de bonnes raisons pour utiliser la syntaxe SCSS, le « Sassy CSS » dans cette formation.

L'essentiel de Sass

Abordez et intégrez Sass dans votre flux de travail. Découvrez les options pour compiler votre code Sass en CSS, passez en revue les mécanismes pour le réutiliser, etc.

2h59 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Sass Sass 3.4.22
Spécial abonnés
Date de parution :25 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !