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 :

Résultat CSS :

Résultat 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.