L'essentiel de Sass

Créer des variables

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à créer et à utiliser des variables Sass. Vous verrez également que Sass reconnaît différents types de donnée.

Transcription

Maintenant que vous savez compiler du code Sass en code CSS, il est temps de se pencher sur le langage Sass en tant que telle. Et c'est ce que nous allons commencer à faire dans ce chapitre. Alors pour illustrer mon propos j'ai une toute simple petite page HTML. Alors, elle est composée d'un grand « div » qui a la classe « wrapper » et qui encadre l'ensemble du contenu de cette page. Le contenu de cette page c'est quoi ? C'est un titre de niveau 1. Ce sont quelques paragraphes, vous les voyez ici et puis dans le fond en « footer » , en pied de page, donc, avec du texte dedans également. Si je vais voir cette page dans le navigateur, rien de transcendent, c'est simplement un peu de contenu sur une page blanche. Vous le voyez, il n'y a encore aucune mise en forme qui affecte cette page. Pourtant, si je vais voir dans mon code, bien, je fais bel et bien référence ici à un fichier CSS qui doit s'appeler « styles.css » , mais qui vous le voyez, n'existe pas encore. Alors, on va de générer. Donc, je vais créer un nouveau fichier que je vais appeler « styles.scss ». C'est un fichier Sass et j'ai mon extension « brackets » qui est installée, qui est active et qui va générer donc automatiquement le fichier « styles.css» qui correspond et le fichier « map » qui correspond également et cela avec les options par défaut, puisque je n'ai pas de fichiers « .brackets.Jzone » pour modifier les options par défaut. Alors maintenant que j'ai ce fichier Sass et ce fichier CSS, j'ai demandé à « brackets » de m'afficher tout ça de manière fracionnement verticale, voilà. Ça va me permettre de vous montrer le fichier CSS ici, à droite et puis le fichier Sass ici, à gauche. Alors, la première chose que Sass va ajouter au CSS, c'est quelque chose qu'on appelle « les variables » et vous allez voir que rien que ça et bien ça vaut largement le détour. Pour créer une variable en Sass, je vais utiliser le symbole « $ » et après le symbole « $ » je vais mettre le nom que j'ai envie de donner à ma variable. Donc ici, par exemple, « pink ». Alors, vous pouvez choisir le nom de votre variable simplement et vous devez bien vous douter du l'Ius que je m'apprête à vous faire. Pas d'espace dans le nom des variables, pas de caractères spéciaux, donc et les accents, les « ç » du français, etc. On ne peut pas les utiliser dans le nom des variables. Bref, ce sont des règles tout à fait similaires à celles que l'on trouve dans les autres langages, dans le CSS, dans le JavaScript. Donc, en ce qui nous concerne, on va s'en tenir à des caractères alphanumériques et on n'aura aucun souci. Alors, maintenant il s'agit de donner une valeur à cette variable. Pour ça en Sass on va utiliser exactement la même technique que dans le CSS. Dans le CSS quand je vais donner une valeur en propriété, je n'utilise pas le symbole « = », mais j'utilise « : » en Sass aussi. Donc, la valeur de cette variable ce sera le code exa-décimal « C69 », c'est-à-dire cette couleur rose que vous voyez ici dans « brackets ». Alors, maintenant que j'ai une première variable qui est définie ici dans mon fichier Sass, je vais pouvoir utiliser cette variable dans un style CSS. Donc je vais créer un style CSS pour « h1 » et je vais lui donner une couleur et plutôt que de directement taper ici le code-couleur que j'ai envie d'utiliser, je vais plutôt faire référence à ma variable « pink », voilà, et quand je sauvegarde que fais Sass ? Il me génère, vous le voyez, un « style.css » , mais dans le « style.css », dans la feuille de style, il n'a pas mis le nom de ma variable, mais il a été substitué le nom de ma variable à la valeur que je lui avais donné au moment de la définir. Voilà comment ça fonctionne ! Et au niveau de la page web, vous doutez de ce qui se passe ? Voilà, mon titre est maintenant rose. Alors, une varaible, au niveau de Sass, ce n'est pas forcément une couleur, ça peut être n'importe quoi d'autre. Par exemple, je vais créer ici une variable que je vais appeler « font-family-title », donc la police des caractères pour les titres et je vais rendre cette variable égale par exemple à « source-serif-pro ». C'est la police de caractère que j'ai envie d'utiliser pour mes titres. Si cette police de caractère n'est pas disponible, j'utiliserai à la place du « Georgia », et si ni l'un ni l'autre n'est disponible, je prendrai la police « serif » par défaut du système. Evidemment, je vais pouvoir maintenant spécifier ceci dans mon style CSS donc, « font-family » et de nouveau, plutôt que d'écrire directement la police de caractère que je vais utiliser, je vais faire référence à ma variable « font-family-title », voilà comme ceci et quand je le sauvegarde, vous remarquez qu'on a ajouté ici une propriété supplémentaire au style « h1 » dans la feuille de style CSS. Et donc, au niveau de mon navigateur, regardez, mon titre a maintenant une autre police de caractères. Je peux également utiliser pour les variables Sass des données numériques. Par exemple, je peux dire ici une variable que je vais appeler « font-size-big » et que je vais rendre égal, par exemple, à « 2 em », c'est-à-dire 2 fois la valeur par défaut choisie par l'internote dans les préférences de son navigateur. En fait, pour être tout à fait exact, ces « 2 rem » que je dois alors utiliser et donc ici je peux très bien utiliser la propriété « font-size » et de nouveau faire référence à cette variable « font-size-big » comme ceci et regardez ce qui se passe. J'ai maintenant ma « font-size » qui arrive ici dans ma feuille de style CSS et donc au niveau de ma page web, mon titre, il a la même taille, puisqu'il avait déjà une taille de 2 rem par défaut. Donc vous avez compris comment ça se passe ici au niveau des variables. Alors attention, les variables sont sensitives. Donc, si ici je mets un « B » majuscule plutôt qu'un « b » minuscule, ça va me dire que cette variable n'est pas définie. Donc, faites très attention à bien ortographier vos variables et à utiliser la bonne case quand vous faites référence à vos variables. Voici donc une première fonctionnalité: les variables que Sass vient ajouter au CSS et vous voyez que rien que ça et ça vaut déjà largement le détour.

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 !