L'essentiel de Sass

Utiliser les opérateurs

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Sass permet d'effectuer des calculs. Appréhendez les opérations mathématiques de base afin de rendre vos variables Sass encore plus flexibles.

Transcription

Une deuxième chose très intéressante que ça s'apporte au CSS, c'est la possibilté de calculer, c'est-à-dire d'utiliser des opérateurs mathématiques. Alors, pour vous démontrer tout cela, je vais toujours utiliser la même page HTML, mais par contre vous voyez que j'étais un petit peu plus loin au niveau du CSS, donc j'ai défini quelques variables supplémentaires. Rien bien méchant, ce sont simplement des couleurs des polices de caractère, des tailles de caractère. Et puis, j'ai utilisé ici ces variables dans une série de style CSS. Oui, je fais référence ici à toutes ces variables. Et donc, ça me génère la feuille de style CSS que vous avez ici à droite de votre écran. Alors, parmi cette variable il y en a trois qui sont ici. Il y en a une qui s'appelle « font-size-regular » qui est égale à un rem et j'utilise cette variable ici au niveau de la taille des caractères pour mes paragraphes. J'ai également une variable qui s'appelle « font-size-small », qui est à 0.75 rem et ça je l'utilise ici au niveau de mon footer. Voilà, et puis j'ai une troisème variable qui est « font-size-big », qui est égal à 2 rem et que j'utilise au niveau de mon titre de niveau 1. Donc voilà ce que ça donne. Deux rem ici, regardez je vais faire une petite expérience, je vais faire « 1+2 rem ». Donc, est-ce que ça ferait bien 3 rem ? Si je sauvegarde, regardez dans ma feuille de style « font-size = 3 rem ». Nous sommes en train d'apprendre que Sass peut réaliser des additions. Alors, petite particularité ici, voyez que 2rem c'est une valeur avec une unité de mesure rem, 1 c'est une valeur sans unité de mesure. Et pourtant, ça c'est capable de faire l'addition de 1 + 2 et de rajouter l'unité de mesure, le rem au résultat de cette addition, ça fait bien de nouveau ici 3rem. Et donc, vous allez voir que mon titre est un petit peu plus grand. Voilà ce que ça donne. Alors, si ça se peut faire des additions et puis on va vérifier si ça se peut faire également d'autres opérations, par exemple si je fais ici 2*3 rem, est-ce que ça se peut faire des multiplications ? La réponse est oui, vous deviez bien vous en doutez. 2*3 rem ça fait 6 rem et mon titre est du coup encore un petit peu plus grand. Alors, que ce passe-t-il quand je mélange des additions et des multiplications ? Par exemple, si je fais ici 2 + 2 x 3 rem. Est-ce que ça va faire 2*3 = 6 + 2 = 8 ? Oui bien 2+2 = 4 * 3 = 12rem. Je sauvegarde et bien ça fait 8rem, effectivement ça c'est au courant des priorités mathématiques et donc en mathématiques on commence par faire les multiplications, donc ici 2*3 = 6 avant de faire les additions, 6 + 2 ça fait bien 8. Vous pouvez contrôler l'ordre de ces opérations grâce à des parenthèses, donc ici si je mets 2 + 2 entre parenthèses, on va d'abord réaliser cette addition 2 + 2 ça fait 4, et puis après on fera la multiplication 4 x 3 = 12. Voilà ça fait bien 12rem, alors juste pour le font ça donne quoi ? Bien ça donne que mon titre est exagérément grand, évidemment 12 fois plus grand que la taille par défaut, donc choisi par l'internaute dans les préférences du navigateur. Donc, Sass peut faire des additions, peut faire des multiplications, il est au courant des priorités mathématiques. Alors, est-ce qu'il peut également faire les autres opérations ? Par exemple, mettons 5 - 3rem, 5 - 3 ça ferait 2. Je sauvegarde et ça fait bien 2rem, donc ça se peut également réalisé des soustractions. Qu'en est-il maintenant des divisions, imaginons que je fasse ici 12 rem / 3, ça donnerait quoi ? Ça donne si vous voyez 4rem. Donc, Sass est capable de faire les 4 opérations de base : l'addition, la soustraction, la multiplication, la division et en plus de ça, il est au courant des priorités mathématiques. Alors, comment puis-je me servir de ça ? Bien regardez, j'ai ici « font-size-regular » = 1rem, ça je vais laisser tranquille. Par contre ici pour ma deuxième variable « font-size-small » j'ai 0.75. Alors, plutôt que de taper directement 0.75, je vais faire référence à ma première variable « font-size-regular » et je vais la multiplier par 0.75 et ça fera bien 0.75rem. Pour ce qui est de « font-size-big », je veux 2rem par défaut, c'est-à-dire « font-size-regular » que je veux multiplier cette fois-ci par 2. Et quand je sauvegarde, regardez ce que ça donne. Pour mon h1 j'ai bien 2rem, pour mon paragraphe j'ai bien 1rem et pour mon footer j'ai bien 0.75rem, donc ces calcules fonctionnent et niveau de ma page web, ça me donne ceci. Le gros avantage maintenant de fonctionner avec ce type de structure, c'est que si je change la valeur de référence, par exemple si je mets 1.2rem plutôt que 1, je vais non seulement modifier « font-size-regular », mais également les deux autres variables et dans les mêmes proportions. Regardez ce que ça donne. pour le p « font-size » est égal 1.2, mais pour le h1 j'ai maintenant 2.4 et pour le footer j'ai maintenant 0.9. Alors, ça donne quoi dans le navigateur ? Ça donne que tout est un petit peu plus grand et pas uniquement la taille des paragraphes, donc c'est ça que j'utilise directement la variable « font-size-regular ». Donc, voilà une deuxième possibilité que Sass introduit dans CSS, la possibilité d'utiliser des opérateurs mathématiques et vous avez vu que c'est diablement pratique pour faire des mises à jour quand on veut modifier comme ça quelque chose. On va modifier une taille de référence et tout va se calculer pour les autres valeurs.

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
Votre/vos formateur(s) :
Date de parution :25 avr. 2017
Durée :2h59 (31 vidéos)

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 !