webleads-tracker

hero

NetDevices - Experts Innovation Digitale - Agréée CII

Le blog de la Transformation Digitale Web & Mobile

Tuto : Introduction sur les Variables et les Mixins sur Sass

  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 » […]

logo_sass

 

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…

 

watcher_sass

 

 

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

 

index-html-sass

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”; 

 

 

resultat_browser_sass

 

 

Je vais rajouter une couleur de fond avec la variable : “$fond”.

  • Résultat SASS : 

 

 

 

 

  • Résultat CSS :

 

 

 

 

 

  • Résultat Browser :

 

 

resultat_browser_sass2

 

 

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.