Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de Sass

Commenter son code Sass

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Votre formateur vous explique de quelle manière Sass étend les commentaires du CSS. Ainsi, vous bénéficierez d'une souplesse accrue dans la gestion de votre application Sass.

Transcription

Pour terminer ce chapitre, je voudrais vous montrer comment SASS étend également le système de commentaires du CSS. Alors je suis ici, toujours dans le même site, j'ai une petite chose que j'ai changée, c'est que j'ai créé ici, un fichier «brackets.json », tout simplement, parce que je veux maintenant compiler avec le style étendu et puis surtout, vous voyez que j'ai mis cette option : « sourceComments are false ». Ça, ça veut dire quoi ? Ça veut dire que dans mon fichier css, on verra mieux à la fin, là, où j'ai mes propres styles, je n'ai plus, entre chacun de ces styles, un commentaire qui m'explique où se situe ce style dans mon application scss. Donc, c'est comme ça que l'on désactive ceci. Alors, je vais revenir au niveau de « styles.scss ». Je vais remonter tout au début de ma feuille de style compilée. Alors, vous constatez que dans « styles.scss », pour le moment, je n'ai aucun commentaire. Alors, un commentaire en css, vous le savez certainement, ça commence par barre-étoile et ça se termine par étoile-barre et tout se qui se trouve entre les deux, c'est un commentaire css. Par exemple ici, « import variables ... ... and third party ... ... frameworks ». Comme ceci. Quand je sauvegarde mon fichier « styles.scss », vous remarquez dans la feuille de style compilée que le commentaire css a été maintenu dans la feuille de style compilée. Effectivement, c'est du css normal, donc, c'est transposé tel quel, dans la feuille de style compilée. Maintenant, le langage sass me permet de spécifier mes commentaires avec une autre syntaxe. Et vous n'allez pas être surpris, si vous faites du javascript, puisque regardez, je peux également, dans sass, spécifier des commentaires avec cette syntaxe-ci. C'est-à-dire avec les double barres. C'est exactement ce que l'on fait, également, en javascript. Alors, à ce moment-là, quand j'utilise cette syntaxe, attention : qui est propre à sass et qui n'est pas valide dans le css classique, à ce moment-là, vous voyez qu'au niveau de la compilation, dans la feuille de style compilée, le commentaire spécifique sass, maintenant, n'apparaît pas ici dans ma feuille de style compilée. Maintenant attention, ces commentaires, quand je les écris en version css classique, donc avec barre-étoile, étoile-barre, ils apparaissent dans ma feuille de style compilée, mais c'est parce que j'utilise un « output style » donc, un style de sortie « expanded », comme ici. Alors, je vais changer, je vais mettre « compressed » à la place. Rappelez-vous que je demande à ce moment-là, de créer un feuille de style minifiée. Et qu'est-ce que cela fait une feuille de style minifiée ? Cela retire justement tous les commentaires. Donc, regardez ce qui se passe ici. Maintenant, j'ai toujours mon commentaire css normal. Je vais demander de recompiler ceci. Au bout d'un moment, vous allez voir la feuille de style minifiée. La voilà. Et cette fois-ci, mon commentaire ne fait tout simplement plus partie de cette feuille de style minifiée. Regardez, il n'y a quasiment plus aucun commentaire. Vous voyez qu'il y en a encore quelques-uns. Alors, comment se fait-il que ceux-là sont restés ? Puisque j'ai une petite astuce dans le langage sass, si je veux que mon commentaire soit quand même dans la feuille de style compilée, malgré que je demande une feuille de style minifiée, je vais tout simplement ajouter ici, au début de mon commentaire, le point d'exclamation et vous savez qu'en css, ce point d'exclamation signifie que c'est important. Remarquez également que j'ai maintenant besoin d'un espace après ce point d'exclamation. Donc maintenant, avec ce point d'exclamation, et malgré que je demande une minification de ma feuille de style, vous voyez que mon commentaire est maintenu dans la feuille de style compilée. C'est un bon endroit ceci, pour inclure des notices de copyright. Là, je vais re-retirer mon commentaire. Si je vais voir dans mon application scss, au niveau de « framework font-awesome » et au niveau de « font-awesome.scss », regardez, c'est exactement ce qu'ils ont fait, chez « font-awesome ». Ils ont mis ici, un point d'exclamation, pour être certains que même si on minifie la feuille de style compilée, ce commentaire fasse quand même partie de la feuille de style compilée, c'est là, regardez, qu'ils ont mis leur notice de copyright. Et vous voyez que « font-awesome » est une licence MIT, donc, c'est quelque chose d'open source et de gratuit. Voilà, vous savez tout ce qu'il faut savoir sur les commentaires sass. Vous voyez comment sass est également le système de commentaire du css.

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 !