Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Abdelazer Matouche Reprenez le contrôle de vos feuilles de style avec Sass 3 se

Abdelazer Matouche Reprenez le contrôle de vos feuilles de style avec Sass 3 septembre 2018 Table des matières I. Introduction 4 0.0.1. En utilisant Sass, pardi ! . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 II. Les bases de Sass 6 1. Sass, un préprocesseur CSS 8 1.1. Un préprocesseur CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 1.2. À quoi ça sert ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.3. Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 1.4. Notre projet fil rouge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 1.5. La compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 1.6. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 2. L’imbrication 14 2.1. L’imbrication, pourquoi faire ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 2.2. La référence au parent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 2.3. Imbrication de media-queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 2.4. Bonne pratique : « The Inception Rule » . . . . . . . . . . . . . . . . . . . . . . 18 2.5. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 2.6. Pour s’entraîner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3. Les variables 20 3.1. Les variables, pourquoi faire ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.2. Les différents types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 3.3. L’interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 3.4. La règle !default . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 3.5. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 3.6. Pour s’entraîner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 4. La directive @import 28 4.1. Importer des feuilles de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 4.2. Bonne pratique : Les feuilles partielles . . . . . . . . . . . . . . . . . . . . . . . 29 4.3. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 5. Les mixins (1/2) 31 5.1. Un mixin, pourquoi faire ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 5.2. Inclure un mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 5.3. Les arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 5.4. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 1 Table des matières 6. Les mixins (2/2) 36 6.1. Valeurs par défaut, arguments nommés et listes d’arguments . . . . . . . . . . . 36 6.2. Passer un bloc de contenu à un mixin . . . . . . . . . . . . . . . . . . . . . . . . 39 6.3. Bonne pratique : Arguments & type null . . . . . . . . . . . . . . . . . . . . . . 40 6.4. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 7. Les fonctions 43 7.1. Un fonction ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 7.2. Quelques fonctions bien utiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 7.2.1. Pour définir une couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 7.2.2. Pour jouer avec les nombres . . . . . . . . . . . . . . . . . . . . . . . . . 45 7.3. La palette du peintre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 7.3.1. Inverse, Nuance de gris et Mélange . . . . . . . . . . . . . . . . . . . . . 46 7.3.2. Lumière, Saturation, Opacité . . . . . . . . . . . . . . . . . . . . . . . . 46 7.4. Jouons avec les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 7.5. Créer sa propre fonction . . . . . . . . . . . . . . . . . . . . . . . . . . uploads/s3/ reprenez-le-controle-de-vos-feuilles-de-style-avec-sass-pdf.pdf