Formation sur le pre-processeur CSS : SASS

1. SASS
Version du 27 novembre 2017

2. “
https://fr.slideshare.net/ThomasBodin3/presentations
2

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

4. Planning
4
Environnement de travail
Techniques avancés
Les bases

5. SASS (1/3)
Environnement de travail
5

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

11. SASS (2/3)
Les bases
11

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

22. 5. Extends
22

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

25. SASS (3/3)
Techniques avancés
25

26. 1. Bootstrap
2. Conditions
3. Boucles
26

27. SASS
Pense bête
27

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,...

30. 30
Merci !
@ThomasBodinFr
hi@thomas-bodin.com