SlideShare une entreprise Scribd logo

SASS

•
•
T
Thomas Bodin

Formation sur le pre-processeur CSS : SASS

Diaporamas connexes

Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPress
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPress
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
1  sur  30
Télécharger pour lire hors ligne
SASS Version du 27 novembre 2017
“ https://fr.slideshare.net/ThomasBodin3/presentations 2
Hello! Je m’appelle Thomas et je suis développeur front-end chez BALTAZARE, une agence digitale spécialisée WordPress ! Retrouvez moi sur Twitter @ThomasBodinFr 3
Planning 4 Environnement de travail Techniques avancés Les bases
SASS (1/3) Environnement de travail 5
1. Présentation 2. Installation 3. Organisation des fichiers 4. Outils 6
1. Présentation Le CSS peut être amusant et facile d’utilisation, mais les feuilles de style deviennent de plus en plus grandes, complexes et difficiles à maintenir. C'est là qu'un préprocesseur peut vous aider. Sass vous permet d'utiliser des fonctions qui n'existent pas dans CSS, comme des variables, du nesting, des mixins, des héritages et d'autres… Une fois que vous commencez à développer avec SASS, cela prendra votre fichier SASS pour le compiler et l'enregistrer comme un fichier CSS normal que vous pouvez utiliser sur votre site web. 7
2. Installation 1. Installer Ruby (uniquement pour Windows) https://rubyinstaller.org/downloads/ 2. Installer SASS Ecrire dans votre terminal : gem install sass 3. Lancer votre watcher a. Se rendre à l’aide de votre terminal dans votre dossier style (cd CHEMIN) b. Ecrire : sass --watch main.scss:main.css 8
3. Organisation des fichiers L’un des avantages va être de pouvoir organiser et séparer son SASS dans plusieurs fichiers tout en continuant d’appeler toujours 1 seul fichier CSS. Votre organisation va donc changer dans le répertoire style : style / main.css (créé automatiquement par SASS) main.scss _accueil.scss _contact.scss _header.scss _footer.scss 9
4. Outils Le problème de séparer son SASS dans plusieurs fichier c’est que dans notre navigateur, celui-ci nous affichera jamais le bon fichier et la bonne ligne puisque nous appelons main.css Pour résoudre ce problème, nous pouvons utiliser un sourcemap qui va permettre à votre débugger d’afficher le fichier source et sa ligne. Ce sourcemap est généré automatiquement avec l’extension de sublime text pour le SASS. Il existe un outil en ligne pour vous aider à comprendre comment fonctionne SASS. Cet outil est un site web : SASS Meister 10
SASS (2/3) Les bases 11
1. Variables 2. Nesting 3. Partials 4. Mixins 5. Extend 6. Operation 12
1. Variables Penser en variables comme moyen de stocker une valeur que vous réutiliserez plusieurs fois dans votre style. Vous pouvez stocker toutes les valeurs CSS : couleurs, polices, taille, media queries,... SASS utilise le symbole $ pour ses variables (comme le PHP) 13
1. Variables Une fois compil��, le CSS généré deviendra : 14
2. Nesting En HTML, nous mettons des boîtes dans des boîtes, c’est l’imbrication dans une logique hiérarchique. SASS vous permettra d’imbriquer vos sélecteurs CSS d'une manière qui suit la même hiérarchie visuelle que votre HTML. C’est ce que l’on appel le Nesting. Attention de ne pas abuser de cette imbrication sur des sélecteurs de TAG qui pourraient s’avérer difficile à entretenir et qui est une mauvaise pratique. 15
2. Nesting Une fois compilé, le CSS généré deviendra : 16
3. Partials Vous pouvez et devez créer plusieurs fichiers SASS qui contiennent de petits extraits de CSS que vous pouvez inclure dans un autre fichiers SASS principal. Se sont les partials ! C'est un excellent moyen de modulariser (gérer sous forme de modules) votre CSS et d'aider à garder les choses plus faciles à maintenir. Un fichier partial est simplement un fichier SASS nommé avec un underscore. L’underscore permet à SASS de savoir que le fichier n'est qu'un fichier partiel et qu'il ne doit pas générer un fichier CSS. Les partials SASS sont utilisées avec la directive @import dans votre fichier principal. 17
3. Partials Cela va importer les fichiers : - "_global.scss" qui est dans le dossier "partage" - “_accueil.scss” qui est dans le dossier “pages” - “_blog.scss” qui est dans le dossier “pages” 18
4. Mixins Certaines choses en CSS sont un peu fastidieuses à écrire, surtout avec CSS3 et les nombreux préfixes de navigateurs. Une mixin vous permet de créer des groupes de déclarations CSS que vous souhaitez réutiliser sur votre site. Vous pouvez même passer des valeurs pour rendre votre mixin plus flexible. Vous les définissez en utilisant @mixin et vous les intégrez en utilisant @include 19
4. Mixins Une fois compilé, le CSS généré deviendra : 20
5. Extends / Héritage L'utilisation de @extend vous permet de partager un ensemble de propriétés CSS d'un sélecteur à l'autre. Cela aide à garder votre Sass très petit. 21
5. Extends 22
6. Opérations Les mathématiques vous manquaient ? Ce n’est plus le cas avec SASS ! Faire des calculs dans son CSS est très utile. SASS possède une poignée d'opérateurs mathématiques standard comme +, -, *, / et %. 23
6. Opérations Une fois compilé, le CSS généré deviendra : 24
SASS (3/3) Techniques avancés 25
1. Bootstrap 2. Conditions 3. Boucles 26
SASS Pense bête 27
28 Lancer SASS : 1. Lancer le terminal 2. Ecrire “cd ” (penser à l’espace) 3. Glisser/déposer le dossier “style” dans votre terminal 4. Appuyer sur “Entrer” 5. Copier/Coller la ligne de commande et appuyer sur “entrer” : sass --watch main.scss:main.css
29 Mon SASS ne se compile pas : 1. Vérifier si il n’y a pas une erreur dans votre terminal 2. Si c’est le cas, regarder ce qui est écrit et rendez-vous dans le fichier qui pose problème pour corriger l’erreur 3. Une fois l’erreur trouvé, se rendre dans le terminal pour vérifier que c’est OK, sinon corriger la nouvelle erreur Cas possible : Variable utilisé mais non déclaré, import de fichier oublié, faute de frappe,...
30 Merci ! @ThomasBodinFr hi@thomas-bodin.com

Contenu connexe

SASS

  • 1. SASS Version du 27 novembre 2017
  • 3. Hello! Je m’appelle Thomas et je suis développeur front-end chez BALTAZARE, une agence digitale spécialisée WordPress ! Retrouvez moi sur Twitter @ThomasBodinFr 3
  • 6. 1. Présentation 2. Installation 3. Organisation des fichiers 4. Outils 6
  • 7. 1. Présentation Le CSS peut être amusant et facile d’utilisation, mais les feuilles de style deviennent de plus en plus grandes, complexes et difficiles à maintenir. C'est là qu'un préprocesseur peut vous aider. Sass vous permet d'utiliser des fonctions qui n'existent pas dans CSS, comme des variables, du nesting, des mixins, des héritages et d'autres… Une fois que vous commencez à développer avec SASS, cela prendra votre fichier SASS pour le compiler et l'enregistrer comme un fichier CSS normal que vous pouvez utiliser sur votre site web. 7
  • 8. 2. Installation 1. Installer Ruby (uniquement pour Windows) https://rubyinstaller.org/downloads/ 2. Installer SASS Ecrire dans votre terminal : gem install sass 3. Lancer votre watcher a. Se rendre à l’aide de votre terminal dans votre dossier style (cd CHEMIN) b. Ecrire : sass --watch main.scss:main.css 8
  • 9. 3. Organisation des fichiers L’un des avantages va être de pouvoir organiser et séparer son SASS dans plusieurs fichiers tout en continuant d’appeler toujours 1 seul fichier CSS. Votre organisation va donc changer dans le répertoire style : style / main.css (créé automatiquement par SASS) main.scss _accueil.scss _contact.scss _header.scss _footer.scss 9
  • 10. 4. Outils Le problème de séparer son SASS dans plusieurs fichier c’est que dans notre navigateur, celui-ci nous affichera jamais le bon fichier et la bonne ligne puisque nous appelons main.css Pour résoudre ce problème, nous pouvons utiliser un sourcemap qui va permettre à votre débugger d’afficher le fichier source et sa ligne. Ce sourcemap est généré automatiquement avec l’extension de sublime text pour le SASS. Il existe un outil en ligne pour vous aider à comprendre comment fonctionne SASS. Cet outil est un site web : SASS Meister 10
  • 12. 1. Variables 2. Nesting 3. Partials 4. Mixins 5. Extend 6. Operation 12
  • 13. 1. Variables Penser en variables comme moyen de stocker une valeur que vous réutiliserez plusieurs fois dans votre style. Vous pouvez stocker toutes les valeurs CSS : couleurs, polices, taille, media queries,... SASS utilise le symbole $ pour ses variables (comme le PHP) 13
  • 14. 1. Variables Une fois compilé, le CSS généré deviendra : 14
  • 15. 2. Nesting En HTML, nous mettons des boîtes dans des boîtes, c’est l’imbrication dans une logique hiérarchique. SASS vous permettra d’imbriquer vos sélecteurs CSS d'une manière qui suit la même hiérarchie visuelle que votre HTML. C’est ce que l’on appel le Nesting. Attention de ne pas abuser de cette imbrication sur des sélecteurs de TAG qui pourraient s’avérer difficile à entretenir et qui est une mauvaise pratique. 15
  • 16. 2. Nesting Une fois compilé, le CSS généré deviendra : 16
  • 17. 3. Partials Vous pouvez et devez créer plusieurs fichiers SASS qui contiennent de petits extraits de CSS que vous pouvez inclure dans un autre fichiers SASS principal. Se sont les partials ! C'est un excellent moyen de modulariser (gérer sous forme de modules) votre CSS et d'aider à garder les choses plus faciles à maintenir. Un fichier partial est simplement un fichier SASS nommé avec un underscore. L’underscore permet à SASS de savoir que le fichier n'est qu'un fichier partiel et qu'il ne doit pas générer un fichier CSS. Les partials SASS sont utilisées avec la directive @import dans votre fichier principal. 17
  • 18. 3. Partials Cela va importer les fichiers : - "_global.scss" qui est dans le dossier "partage" - “_accueil.scss” qui est dans le dossier “pages” - “_blog.scss” qui est dans le dossier “pages” 18
  • 19. 4. Mixins Certaines choses en CSS sont un peu fastidieuses à écrire, surtout avec CSS3 et les nombreux préfixes de navigateurs. Une mixin vous permet de créer des groupes de déclarations CSS que vous souhaitez réutiliser sur votre site. Vous pouvez même passer des valeurs pour rendre votre mixin plus flexible. Vous les définissez en utilisant @mixin et vous les intégrez en utilisant @include 19
  • 20. 4. Mixins Une fois compilé, le CSS généré deviendra : 20
  • 21. 5. Extends / Héritage L'utilisation de @extend vous permet de partager un ensemble de propriétés CSS d'un sélecteur à l'autre. Cela aide à garder votre Sass très petit. 21
  • 23. 6. Opérations Les mathématiques vous manquaient ? Ce n’est plus le cas avec SASS ! Faire des calculs dans son CSS est très utile. SASS possède une poignée d'opérateurs mathématiques standard comme +, -, *, / et %. 23
  • 24. 6. Opérations Une fois compilé, le CSS généré deviendra : 24
  • 28. 28 Lancer SASS : 1. Lancer le terminal 2. Ecrire “cd ” (penser à l’espace) 3. Glisser/déposer le dossier “style” dans votre terminal 4. Appuyer sur “Entrer” 5. Copier/Coller la ligne de commande et appuyer sur “entrer” : sass --watch main.scss:main.css
  • 29. 29 Mon SASS ne se compile pas : 1. Vérifier si il n’y a pas une erreur dans votre terminal 2. Si c’est le cas, regarder ce qui est écrit et rendez-vous dans le fichier qui pose problème pour corriger l’erreur 3. Une fois l’erreur trouvé, se rendre dans le terminal pour vérifier que c’est OK, sinon corriger la nouvelle erreur Cas possible : Variable utilisé mais non déclaré, import de fichier oublié, faute de frappe,...