#Barcamp : Aller plus loin avec SCSS

Nous utilisons quotidiennement deux fonctionnalités de SASS dans nos projets : les variables et l’imbrication. Mais cela n’est qu’une infime partie des fonctionnalités proposées par SASS.

Les variables

L’imbrication

Il est conseillé de ne pas trop imbriquer les selecteurs (pas plus de 3 niveaux d’imbrication) : « Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. »

Les mixins

Un mixin permet de regrouper des propriétés CSS réutilisables. On peut passer des paramètres à un mixin pour le rendre plus modulaire.

Les fonctions

Une fonction se distingue d’un mixin car elle ne définit pas une série de propriétés mais retourne une valeur en fonction de paramètres passés en arguments.

Sass définit une série de fonctions natives qu’on peut utiliser directement sans avoir à les redéfinir (http://sass-lang.com/documentation/Sass/Script/Functions.html).

Les partials

On peut structurer les fichiers SCSS en les scindant en plusieurs partials. Ces différents fichiers sont compilés dans un même fichier lorsqu’ils sont inclus dans ce fichier, et ne nécessite pas d’être tous inclus dans le <head> de la page.  La convention de  nommage est la suivante : _nom_du_partial.scss.

L’héritage

Le mot-clé extend permet à un sélecteur d’hériter des propriétés d’un autre sélecteur.

À noter que cet héritage est multiple.

Les opérateurs

Grâce à Sass, on peut utiliser les opérateurs mathématiques de base (pour calculer les hauteurs, largeurs, marges, …).

Un exemple d’utilisation des opérateurs est la création de grilles responsives.

Le sélecteur « & »

Le sélecteur & fait référence au sélecteur parent. Il est donc forcément imbriqué.

Les conditions

Sass introduit les conditions.

Les boucles

Sass introduit également les boucles while, for et each.

Liens supplémentaires :

Une réponse sur “#Barcamp : Aller plus loin avec SCSS”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.