Un guide simple et facile pour comprendre Sass

Il y a quelque temps, Thoriq Firdaus a écrit un excellent article sur comment démarrer avec Sass, qui vous a montré comment installer et utiliser ce langage de préprocesseur CSS très utile (vous pouvez le vérifier, vous savez, pour commencer).

Dans cet article, j'ai pensé que je pourrais vous donner un peu plus d'informations sur ce que vous pouvez faire avec Sass et comment les développeurs l'utilisent tous les jours pour créer un code CSS meilleur et plus modulaire. Passez à la section souhaitée:

• Outils du commerce
• Variables
• Imbrication
• Extensions de règles
• Mixins
• Sélecteurs d'espace réservé
• Opérations
• Les fonctions

Outils du commerce

Thoriq vous a montré comment utiliser Sass depuis la ligne de commande en utilisant la commande sass --watch .

Si vous préférez les outils GUI, vous pouvez utiliser mon application personnelle préférée, Codekit, un outil de développement Web pour la compilation de Sass, la concaténation, l'autopréfixation et bien plus encore. Prepros est une autre application très performante qui peut être utilisée sur tous les systèmes. Les deux sont des applications payantes, mais valent la peine si vous les utiliserez à long terme.

Si vous voulez simplement essayer Sass sans payer pour quoi que ce soit, vous pouvez utiliser le terminal, ou Koala (voici notre avis), une application riche en fonctionnalités multi-plateforme, qui peut tenir contre ses homologues premium.

Variables

L'une des premières choses dont vous aurez besoin pour comprendre est les variables. Si vous venez d'un environnement PHP ou autre langage de codage similaire, ce sera une seconde nature pour vous. Les variables servent à stocker des bits et des morceaux 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 utile ici, mais imaginez avoir 3000 lignes de code. Si votre palette de couleurs change, vous devez remplacer chaque valeur de couleur dans CSS. Avec Sass, vous pouvez simplement modifier la valeur de la variable $primary_color et l'utiliser.

Les variables sont utilisées pour stocker les noms de polices, les tailles, les couleurs et une foule d'autres informations . Pour les projets plus importants, il peut être utile d'extraire toutes vos variables dans un fichier séparé (nous verrons comment cela se fera bientôt). Ce que cela vous permet de faire est de recolorer l'ensemble de votre projet et de modifier les polices et autres aspects clés sans jamais toucher aux règles CSS réelles . Tout ce que vous devez faire est de modifier certaines variables.

Imbrication

Une autre caractéristique de base que Sass vous donne est la possibilité d'imbriquer des règles . Supposons que vous construisez un menu de navigation. Vous avez un élément nav qui contient une liste non ordonnée, des éléments de liste et des liens. En CSS, vous pouvez faire quelque chose comme ceci:

 #header nav {/ * Règles pour la zone de navigation * /} #header 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 comment le code ci-dessus pourrait ressembler à 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 utilisant l'imbrication avec une indentation appropriée, vous pouvez obtenir des structures de code très lisibles, même si vous avez une bonne quantité de code.

Un inconvénient de l'imbrication est qu'il peut conduire à une spécificité inutile . Dans l'exemple ci-dessus, j'ai référé à des liens avec #header nav a . Vous pouvez également utiliser #header nav ul li a qui serait probablement trop.

Dans Sass, il est beaucoup plus facile d'être très précis car tout ce que vous avez à faire est d'imbriquer 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 * /}}}}} 

Extensions de règles

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

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

Les .button-primary et .button-small étendent toutes la classe .button, ce qui signifie qu'elles prennent toutes leurs propriétés et définissent ensuite les leurs.

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 les fonctionnalités d'extension pour une efficacité CSS optimale.

Une mise en garde de prolonger est qu'ils ne fonctionneront pas dans les requêtes de médias comme vous vous y attendez. Ceci est un peu plus avancé, mais vous pouvez lire tout ce qui concerne ce comportement dans la section Présentation des sélecteurs Placeholder - les sélecteurs d'espace réservé sont des extensions spéciales dont nous parlerons bientôt.

Mixins

Les mixins sont une autre fonctionnalité préférée des utilisateurs de préprocesseur. Les mixins sont des jeux de règles réutilisables - parfaits pour les règles spécifiques aux fournisseurs ou pour raccourcir les longues règles CSS.

Que diriez-vous de créer une règle de transition pour les éléments hover:

 @mixing hover-effect {-webkit-transition: couleur de fond 200ms; -moz-transition: couleur de fond 200ms; -o-transition: couleur de fond 200ms; transition: fond-couleur 200ms; } a {@include hover-effect; } .button {@include hover-effect; } 

Les 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 sur l'heure exacte de la transition . Nous voudrons peut-être que les boutons passent un peu plus lentement par exemple.

 @mixin hover-effect ($ vitesse) {-webkit-transition: couleur de fond $ vitesse; -moz-transition: couleur de fond $ speed; -o-transition: background-color $ vitesse; transition: background-color $ vitesse; } a {@include hover-effect (200ms); } .button {@include hover-effect (300ms); } 

Sélecteurs d'espace réservé

Les sélecteurs Placeholder ont été introduits avec Sass 3.2 et ont résolu un problème qui pourrait causer un peu de ballonnement dans votre code CSS généré. Jetez un oeil à ce code qui crée des messages d'erreur:

 .message {font-taille: 1.1em; rembourrage: 11px; border-width: 1px; style de bordure: solide; } .message-danger {@extend .message; arrière-plan: # C20030; couleur: #fff; border-color: # A8002A; } .message-success {@extend .message; arrière-plan: # 7EA800; couleur: #fff; border-color: # 6B8F00; } 

Il est très probable que la classe de message ne sera jamais utilisée dans notre HTML: elle a été créée pour être étendue, pas utilisée telle quelle. Cela provoque un peu de ballonnement 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 {font-size: 1.1em; rembourrage: 11px; border-width: 1px; style de bordure: solide; } .message-danger {@extend% button; arrière-plan: # C20030; couleur: #fff; border-color: # A8002A; } .message-success {@extend% button; arrière-plan: # 7EA800; couleur: #fff; border-color: # 6D9700; } 

À ce stade, vous vous demandez peut-être quelle est la différence entre extend et mixins. Si vous utilisez des espaces réservés, ils se comportent comme un mixin sans paramètre. C'est vrai, mais la sortie en CSS diffère. La différence est que mixins duplique les règles tandis que les espaces réservés s'assurent que les mêmes règles partagent les sélecteurs, ce qui entraîne moins de CSS à la fin.

Opérations

Il est difficile de résister au jeu de mots ici, mais je m'abstiendrai de toute blague 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:

 .container {largeur: 100%; } article {float: left; largeur: 600px / 960px * 100%; } aside {float: right; largeur: 300px / 960px * 100%; } 

L'exemple ci-dessus crée un système de grille basé sur 960px avec un minimum de tracas. Il se compilera bien au CSS suivant:

 .container {largeur: 100%; } article {float: left; largeur: 62, 5%; } aside {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 de la bordure ait une relation quelconque. En soustrayant une nuance de gris, nous pouvons assombrir la couleur, rendant la relation visible:

 $ primaire: # 7EA800; .message-success {@extend% button; arrière-plan: $ primary; couleur: #fff; border-color: $ primaire - # 111; } 

Plus la couleur soustraite est claire, plus l'ombre obtenue sera foncée. Plus la couleur ajoutée est claire, plus l'ombre obtenue est claire.

Les fonctions

Il y a un grand nombre de fonctions à utiliser: fonctions de nombre, fonctions de chaîne, fonctions de liste, fonctions de couleur et plus. Jetez un oeil à la longue liste dans la documentation du développeur. Je vais jeter un coup d'oeil à un couple ici juste pour vous montrer comment ils fonctionnent.

La fonction lighten et darken peut être utilisée pour changer 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 assombrissement.

 $ primaire: # 7EA800; .message-success {@extend% button; arrière-plan: $ primary; couleur: #fff; border-color: darken ($ primaire, 5); } 

Le deuxième argument de la fonction est le pourcentage d'assombrissement requis. Toutes les fonctions ont des paramètres; Jetez un oeil à la documentation pour voir ce qu'ils sont! Voici quelques autres fonctions de couleurs explicites: desaturate, saturate, invert, grayscale .

La fonction ceil, tout comme en PHP, renvoie un nombre arrondi au nombre entier suivant. Cela peut être utilisé lors du calcul des largeurs de colonne ou si vous ne voulez pas utiliser beaucoup de décimales dans le CSS final.

 .title {font-size: ceil ($ heading_size * 1.3314); } 

Aperçu

Les fonctionnalités de Sass nous donnent une grande puissance pour écrire de meilleurs CSS avec moins d'effort. L'utilisation correcte des mixins, extensions, fonctions et variables rendra nos feuilles de style plus faciles à maintenir, plus lisibles et plus faciles à écrire.

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

Comment appliquer des filtres Instagram sur des images Web

Beaucoup aiment utiliser Instagram et les filtres qui viennent avec l'application, pour rendre leurs photos plus intéressantes et belles. Cependant, jusqu'à présent, l'utilisation de ces filtres est limitée à utiliser dans l'application. Que faire si vous souhaitez utiliser des filtres Instagram sur des images Web, en dehors de l'application, comme des photos que vous souhaitez afficher dans votre blog ou site Web personnel?Eh b

(Conseils techniques et de conception)

Comment construire un meilleur UX avec des données HTML5 * Attributs

Avez-vous déjà voulu ajouter des données personnalisées à un élément HTML particulier pour y accéder plus tard avec JavaScript? Avant l'apparition de HTML5 sur le marché, le stockage de données personnalisées associées au DOM était un vrai problème et les développeurs devaient utiliser toutes sortes de hacks, comme l'introduction d'attributs non standard ou l'utilisation de la méthode obsolète setUserData () pour contourner le problème. .Heureusement, v

(Conseils techniques et de conception)