Plongez dans le monde des variables et des mixins avec NetDevices.
Tutoriel SASS – #2 – Les Variables
Les variables ont pour but de stocker des informations.
Remarques :
- bien respecter l’indentation. Il faut en effet penser à mettre en premier les variables avec les propriétés puis mettre les balises ou class ou ID en dessous.
- Ne pas mettre de « ; » ni d’accolades » } ».
Dans notre “terminal”, notre watcher qui détecte les changements. On le voit sur la ligne script : >>> Change deteted to…
Ci-dessus, nous avons un exemple d’erreurs indiquées en rouge sur le terminal plus précisément où se situe le problème détecté.
En vert la modification à été corrigée.
Nous remarquons qu’à chaque modifications faites sur le fichier sass, le terminal compile tout seul et va apporter les modifications sur le fichier “style.css” et dans “style.css.map”.
Dans le fichier html, on a rajouté une div avec une class =”cote”.
Dans le fichier SASS on a mit une variable “$carre” comprenant une valeur de 100px, donc une width et une height avec la même valeur et une autre variable comprenant la couleur pour le background.
Au début du fichier bien mettre en “commentaire” pour faire la distinction :
//variables
// mon css
Résultat : texte violet dont la couleur correspond à la variable “paragraphe” ainsi que le carré noir qui correspond aux variables : “$carre” et “$primary-color”;
Je vais rajouter une couleur de fond avec la variable : “$fond”.
- Résultat :
- SASS
- CSS
- Browser
SASS permet de stocker un nombre important d’informations dans les variables et donc limiter un nombre trop important de ligne de code. On peut donc changer la valeur de la variable ex la valeur de la couleur, ce qui la changera partout.
Tutoriel SASS – #3 – Les mixins
Mixin et une fonction que l’on peut utiliser comme une variable. Elle va permettre de créer un bout de css réutilisable.
Une caractéristique : on peut mettre plusieurs lignes avec une seule variable.
Exemple : pour les webkit des border radius.
Cela évite de répéter à chaque fois pour le “border radius” les webkit. On met un mixin comprenant les webkits. Lorsque que l’on appellera la variable, il les intégrera automatiquement partout.
