Un guide simple et facile à comprendre Sass

Il y a quelque temps, Thoriq Firdaus a écrit un excellent article sur la prise en main de Sass, qui vous expliquait comment installer et utiliser ce langage très utile pour les préprocesseurs CSS (vous voudrez peut-être jeter un œil dessus, pour commencer).

Dans cet article, je pensais pouvoir vous expliquer un peu mieux ce que vous pouvez faire avec Sass et comment les développeurs l'utilisent au quotidien pour créer du code CSS de meilleure qualité et plus modulaire. Passez à la section que vous voulez:

• Outils du commerce
• Variables
• Nidification
• Extension de jeux de règles
• Mixins
• Sélecteurs d'espaces réservés
• Des opérations
• Les fonctions

Outils du commerce

Thoriq vous a montré comment utiliser Sass à partir de la ligne de commande en utilisant le sass --watch commander.

Si vous préférez les outils graphiques, vous pouvez utiliser mon application préférée, Codekit, un outil de développement Web permettant de compiler Sass, de concaténer, d’auto-préfixer, etc. Prepros est une autre application très performante qui peut être utilisée sur tous les systèmes. Les deux sont applications payantes mais valent bien la peine si vous les utiliserez à long terme.

Si vous voulez juste essayer Sass sans rien payer vous pouvez utiliser le terminal, ou Koala (voici notre critique), une application gratuite multiplate-forme riche en fonctionnalités, qui peut résister à ses homologues haut de gamme.

Variables

Les variables sont l’une des premières choses dont vous aurez besoin pour bien comprendre la situation. Si vous venez d'un langage PHP ou d'un langage de programmation similaire, ce sera une seconde nature pour vous. Les variables sont pour stocker des bribes d'informations réutilisables, comme une valeur de couleur par exemple:

 $ primary_color: # 666666; .button color: $ primary_color;  .important color: $ primary_color;  

Cela peut ne pas sembler très utile ici, mais imaginons avoir 3 000 lignes de code. Si votre palette de couleurs change, vous devrez remplacer chaque valeur de couleur en CSS. Avec Sass, vous pouvez simplement modifier la valeur du $ primary_color variable et se faire avec elle.

Les variables sont utilisées pour stocker des noms de polices, tailles, couleurs et une foule d'autres informations. Pour les projets plus importants, il peut être intéressant d’extraire toutes vos variables dans un fichier séparé (nous verrons bientôt comment cela se passe). Cela vous permet de recolorer tout votre projet et de changer les polices et d’autres aspects essentiels. sans jamais toucher aux règles CSS. Tout ce que vous avez à faire est de modifier certaines variables.

Nidification

Une autre caractéristique de base que Sass vous donne est la capacité à imbriquer des règles. Supposons que vous construisez un menu de navigation. Tu as un nav élément contenant une liste non ordonnée, des éléments de liste et des liens. En CSS, vous pouvez faire quelque chose comme ça:

 #header nav / * Règles pour la zone de navigation * / #head nav nav ul / * Règles pour le menu * / #header nav li / * Règles pour les éléments de liste * / #header nav a / * Règles pour les liens * / 

Dans les sélecteurs, nous nous répétons beaucoup. Si les éléments ont des racines communes, nous pouvons utiliser l’imbrication pour écrire nos règles d'une manière beaucoup plus propre.

Voici à quoi pourrait ressembler le code ci-dessus dans Sass:

 #header nav / * Règles pour la zone de navigation * / ul / * Règles pour le menu * / li / * Règles pour les éléments de liste * / a / * Règles pour les liens * / 

L'imbrication est extrêmement utile car elle rend les feuilles de style (beaucoup) plus lisibles. En combinant nid avec indentation appropriée, vous pouvez obtenir structures de code très lisibles, même si vous avez une bonne quantité de code.

Un des inconvénients de la nidification est qu’elle peut conduire à une spécificité inutile. Dans l'exemple ci-dessus, j'ai parlé de liens avec #header nav a. Vous pouvez aussi utiliser #header nav ul li a ce qui serait probablement trop.

Dans Sass, il est beaucoup plus facile d’être très spécifique car tout ce que vous avez à faire est d’embellir vos règles. Ce qui suit est beaucoup moins lisible et assez spécifique.

 #header nav / * Règles pour la zone de navigation * / ul / * Règles pour le menu * / li / * Règles pour les éléments de liste * / a / * Règles pour les liens * / 

Extension de jeux de règles

L'extension vous sera familière si vous travaillez avec des langages orientés objet. Il est préférable de comprendre à travers un exemple, créons 3 boutons qui sont de légères variations les uns des autres.

 .bouton display: inline-block; couleur: # 000; arrière-plan: # 333; border-radius: 4px; rembourrage: 8px 11px;  .button-primary @extend .button; background: # 0091C2 .button-small @extend .button; taille de police: 0.9em; rembourrage: 3px 8px;  

le .bouton-primaire et .petit bouton toutes les classes étendent la .bouton classe qui signifie qu'ils prennent toutes ses propriétés, puis définissent leur propre.

Ceci est extrêmement utile dans de nombreuses situations où des variations d'un élément peuvent être utilisées. Les messages (alerte / succès / erreur), les boutons (couleurs, tailles), les types de menus, etc. peuvent tous utiliser la fonctionnalité d'extension pour une grande efficacité CSS.

Une mise en garde de s'étend est que ils ne fonctionneront pas dans les requêtes des médias comme on peut s'y attendre. Ceci est un peu plus avancé, mais vous pouvez en apprendre plus sur ce comportement dans Compréhension des sélecteurs de paramètres de substitution - les sélecteurs de paramètre de substitution sont un type spécial d’extension dont nous parlerons bientôt.

Mixins

Les mixins sont une autre caractéristique préférée des utilisateurs de préprocesseurs. Les mixins sont des ensembles de règles réutilisables - parfaits pour les règles spécifiques à un fournisseur ou pour raccourcir les règles CSS longues.

Pourquoi ne pas créer une règle de transition pour les éléments de survol:

 @mixing hover-effect -webkit-transition: couleur d'arrière-plan 200 ms; -moz-transition: couleur de fond 200ms; -o-transition: couleur d'arrière-plan 200 ms; transition: couleur de fond 200ms;  un effet de survol @include;  .button @include hover-effect;  

Mixins vous permettent également d’utiliser des variables pour définir les valeurs dans le mixin. Nous pourrions réécrire l'exemple ci-dessus pour nous donner le contrôle de l'heure exacte de la transition. Nous pouvons vouloir que les boutons fassent une transition un peu plus lente par exemple.

 @mixin hover-effect ($ speed) -webkit-transition: couleur de fond $ speed; -moz-transition: couleur de fond $ speed; -o-transition: couleur de fond $ speed; transition: couleur de fond $ vitesse;  un effet de survol @include (200ms);  .button @include hover-effect (300ms);  

Sélecteurs d'espaces réservés

Les sélecteurs de substitution ont été introduits avec Sass 3.2 et résolvent un problème qui pourrait causer un peu de gonflement dans votre code CSS généré. Regardez ce code qui crée des messages d'erreur:

 .message taille de la police: 1.1em; rembourrage: 11px; largeur de la bordure: 1px; style de bordure: solide;  .message-danger @extend .message; arrière-plan: # C20030; couleur: #fff; couleur de bordure: # A8002A;  .message-success @extend .message; arrière-plan: # 7EA800; couleur: #fff; couleur de bordure: # 6B8F00;  

Il est fort probable que la classe de message ne sera jamais utilisée dans notre code HTML: elle a été créé pour être étendu, pas utilisé tel quel. Cela provoque un peu de gonflement dans votre CSS généré. Pour rendre votre code plus efficace, vous pouvez utiliser le sélecteur d’espace réservé qui est indiqué par un signe de pourcentage:

 % message taille de la police: 1.1em; rembourrage: 11px; largeur de la bordure: 1px; style de bordure: solide;  .message-danger @extend% button; arrière-plan: # C20030; couleur: #fff; couleur de bordure: # A8002A;  .message-success @extend% button; arrière-plan: # 7EA800; couleur: #fff; couleur de bordure: # 6D9700;  

À ce stade, vous vous demandez peut-être quelle est la différence entre les extensions et les mixins. Si vous utilisez des espaces réservés, ils se comportent comme un mixin sans paramètre. Cela est vrai, mais la sortie en CSS diffère. La différence est que mixins dupliquer les règles tandis que des espaces réservés feront en sorte que les mêmes règles partagent les sélecteurs, résultant en moins de CSS à la fin.

Des opérations

Il est difficile de résister au jeu de mots ici, mais je m'abstiendrai de toute plaisanterie médicale pour le moment. Les opérateurs vous permettent de faire des calculs dans votre code CSS et peuvent être très utiles. L'exemple du guide Sass est parfait pour illustrer ceci:

 .conteneur largeur: 100%;  article float: left; largeur: 600px / 960px * 100%;  aparté float: right; largeur: 300px / 960px * 100%;  

L'exemple ci-dessus crée un système de grille basé sur 960 pixels avec un minimum de tracas. Il compilera joliment le CSS suivant:

 .conteneur largeur: 100%;  article float: left; largeur: 62,5%;  aparté float: right; largeur: 31,25%;  

Un bon usage que je trouve pour les opérations est de mélanger les couleurs. Si vous regardez le message de réussite Sass ci-dessus, il n’est pas clair que la couleur de l’arrière-plan et la bordure aient une sorte de relation. En soustrayant une nuance de gris, nous pouvons assombrir la couleur, rendant la relation visible:

 $ primaire: # 7EA800; .message-success @extend% button; fond: $ primaire; couleur: #fff; border-color: $ primaire - # 111;  

Plus la couleur soustraite est claire, plus la nuance obtenue sera sombre. Plus la couleur ajoutée est claire, plus la nuance obtenue est claire.

Les fonctions

Il existe un grand nombre de fonctions à utiliser: fonctions numériques, fonctions de chaîne, fonctions de liste, fonctions de couleur, etc. Regardez la longue liste dans la documentation du développeur. Je vais jeter un oeil à un couple ici juste pour vous montrer comment ils fonctionnent.

le alléger et assombrir Cette fonction peut être utilisée pour modifier la luminosité d’une couleur. C'est mieux que de soustraire des nuances, cela rend tout encore plus modulaire et évident. Jetez un oeil à notre exemple précédent en utilisant la fonction d'assombrissement.

 $ primaire: # 7EA800; .message-success @extend% button; fond: $ primaire; couleur: #fff; couleur de bordure: assombrit ($ primaire, 5);  

Le deuxième argument de la fonction est le pourcentage d'assombrissement requis. Toutes les fonctions ont des paramètres; Jetez un coup d'oeil à la documentation pour voir ce qu'ils sont! Voici quelques autres fonctions couleur auto-explicatives: désaturer, saturer, inverser, niveaux de gris.

le plafond function, comme en PHP, retourne un nombre arrondi au nombre entier suivant. Ceci peut être utilisé lors du calcul de la largeur des colonnes ou si vous ne souhaitez pas utiliser beaucoup de décimales dans le code CSS final..

 .titre taille de la police: ceil ($ heading_size * 1.3314);  

Vue d'ensemble

Les fonctionnalités de Sass nous donnent un grand pouvoir pour écrire de meilleurs CSS avec moins d’effort. La bonne utilisation des mixins, des extensions, des fonctions et des variables rendra nos feuilles de style plus faciles à gérer, plus lisibles et plus faciles à écrire..

Si vous êtes intéressé par un autre préprocesseur CSS similaire, je vous suggère de regarder LESS (ou de consulter notre guide du débutant) - le principe sous-jacent est à peu près le même!