Share
Manier le véritable pouvoir d'un préprocesseur CSS est une aventure. Il existe d'innombrables langages, syntaxes et fonctionnalités, tous prêts à l'emploi. maintenant.
Dans cet article, nous allons couvrir les différentes fonctionnalités et avantages de l’utilisation de trois préprocesseurs différents: Sass, LESS et Stylus..
Les préprocesseurs produisent des CSS qui fonctionnent dans tous les navigateurs.
Les préprocesseurs CSS3 sont des langages écrits dans le seul but d’ajouter des fonctionnalités innovantes à CSS sans briser la compatibilité du navigateur. Pour ce faire, ils compilent le code que nous écrivons dans des CSS classiques qui peuvent être utilisés dans n’importe quel navigateur jusqu’à l’âge de pierre. Les préprocesseurs apportent des milliers de fonctionnalités et, dans cet article, nous en aborderons certaines qui ont été annoncées et d'autres qui ne le sont pas. Commençons.
La partie la plus importante de l'écriture de code dans un préprocesseur CSS consiste à comprendre la syntaxe. Heureusement pour nous, la syntaxe est (ou peut être) identique à CSS classique pour les trois préprocesseurs.
Sass et LESS utilisent tous deux la syntaxe CSS standard. Cela rend extrêmement facile la conversion d'un fichier CSS existant en préprocesseur. Sass utilise le .scss extension de fichier et LESS utilise le .Moins extension. Le fichier Sass ou LESS de base peut être configuré comme suit:
/ * style.scss ou style.less * / h1 color: # 0982C1;
Comme vous l'avez peut-être remarqué, il ne s'agit que de CSS standard, qui compile parfaitement à la fois en Sass et en LESS.
Il est important de noter que Sass a également une syntaxe plus ancienne, qui omet les points-virgules et les accolades. Bien que cela existe toujours, il est vieux et nous ne l'utiliserons pas au-delà de cet exemple. La syntaxe utilise le .toupet extension de fichier et ressemble à ceci:
/ * style.sass * / h1 couleur: # 0982c1
La syntaxe de Stylus est beaucoup plus détaillée. En utilisant le .styl Stylus accepte la syntaxe CSS standard, mais également d’autres variantes où les crochets, les deux points et les points-virgules sont tous facultatifs. Par exemple:
/ * style.styl * / h1 color: # 0982C1; / * omettre les crochets * / h1 color: # 0982C1; / * omettre les deux points et points-virgules * / h1 couleur # 0982C1
L'utilisation de différentes variantes dans la même feuille de style est également valide. Ainsi, les éléments suivants seront compilés sans erreur..
h1 color # 0982c1 h2 taille de police: 1.2em
Les variables peuvent être déclarées et utilisées dans la feuille de style. Ils peuvent avoir n'importe quelle valeur qui est une valeur CSS (par exemple, des couleurs, des nombres [unités incluses] ou du texte.), Et peuvent être référencés n'importe où dans notre feuille de style.
Les variables Sass sont précédées du $ le symbole, la valeur et le nom sont séparés par un point-virgule, exactement comme une propriété CSS.
$ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: en pointillé; body color: $ mainColor; border: 1px $ borderStyle $ mainColor; max-width: $ siteWidth;
Les variables LESS sont exactement les mêmes que les variables Sass, sauf que les noms de variables sont précédés du nom @ symbole.
@mainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: en pointillé; body color: @mainColor; bordure: 1px @borderStyle @mainColor; max-width: @siteWidth;
Les variables de stylet n’ont besoin d’être ajoutées à rien, bien que cela permette au $ symbole. Comme toujours, le point-virgule final n'est pas obligatoire, mais un signe égal entre la valeur et la variable l'est. Une chose à noter est que Stylus (0.22.4) compile si nous ajoutons le @ symbole à un nom de variable, mais n'appliquera pas la valeur lorsqu'elle est référencée. En d'autres termes, ne faites pas ça.
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = couleur du corps en pointillé bordureColor 1px $ borderStyle mainColor largeur_max siteWidth
Chacun des fichiers ci-dessus sera compilé dans le même CSS. Vous pouvez utiliser votre imagination pour voir à quel point les variables peuvent être utiles. Nous n’aurons plus besoin de changer une couleur ni de la retaper vingt fois, ni de vouloir changer la largeur de notre site et d’avoir à chercher pour la trouver. Voici le CSS après compilation:
corps color: # 0982c1; bordure: 1px en pointillé # 0982c1; largeur maximale: 1024px;
Si nous devons référencer plusieurs éléments avec le même parent dans notre CSS, il peut être fastidieux de continuer à écrire le parent encore et encore.
section margin: 10px; section nav height: 25px; section nav a color: # 0982C1; section nav a: hover text-decoration: underline;
Au lieu de cela, en utilisant un préprocesseur, nous pouvons écrire les sélecteurs enfants entre crochets du parent. Également Et le symbole fait référence au sélecteur de parent.
La syntaxe des trois préprocesseurs est identique pour les sélecteurs imbriqués.
section margin: 10px; nav hauteur: 25px; a color: # 0982C1; &: hover text-decoration: underline;
C'est le CSS compilé à partir du code ci-dessus. C'est exactement la même chose qu'au début!
section margin: 10px; section nav height: 25px; section nav a color: # 0982C1; section nav a: hover text-decoration: underline;
Les mixins sont des fonctions qui permettent la réutilisation de propriétés dans notre feuille de style. Plutôt que de devoir parcourir notre feuille de style et modifier une propriété plusieurs fois, nous pouvons maintenant la modifier dans notre mixin. Cela peut être très utile pour le style spécifique des éléments et les préfixes du fournisseur. Lorsque des mixins sont appelés depuis un sélecteur CSS, les arguments de mixin sont reconnus et les styles à l'intérieur du mixin sont appliqués au sélecteur..
/ * Erreur sass mixin avec l'argument (facultatif) $ borderWidth qui, par défaut, est 2px si non spécifié * / @mixin error ($ borderWidth: 2px) border: $ borderWidth solid # F00; couleur: # F00; .generic-error padding: 20px; marge: 4px; @include error (); / * Applique les styles de mixin error * / .login-error left: 12px; position: absolue; en haut: 20px; @include error (5px); / * Applique les styles de mixin error avec l'argument $ borderWidth égal à 5px * /
/ * MOINS erreur de mixin avec l'argument (facultatif) @borderWidth qui, par défaut, est 2px si non spécifié * / .error (@borderWidth: 2px) border: @borderWidth solid # F00; couleur: # F00; .generic-error padding: 20px; marge: 4px; .Erreur(); / * Applique les styles de mixin error * / .login-error left: 12px; position: absolue; en haut: 20px; erreur (5 px); / * Applique les styles de mixin error avec l'argument @borderWidth égal à 5px * /
/ * Erreur de mélange du stylet avec l'argument (facultatif) borderWidth qui par défaut est 2px si non spécifié * / error (borderWidth = 2px) border: borderWidth solid # F00; couleur: # F00; .generic-error padding: 20px; marge: 4px; Erreur(); / * Applique les styles de mixin error * / .login-error left: 12px; position: absolue; en haut: 20px; erreur (5px); / * Applique les styles de mixin error avec l'argument borderWidth égal à 5px * /
Tous les préprocesseurs sont compilés avec le même code ci-dessous:
.generic-error padding: 20px; marge: 4px; bordure: solide 2px # f00; couleur: # f00; .login-error left: 12px; position: absolue; en haut: 20px; bordure: 5px solide # f00; couleur: # f00;
Lorsque vous écrivez CSS à l'ancienne, nous pourrions utiliser le code suivant pour appliquer les mêmes styles à plusieurs éléments à la fois:
p, ul, ol / * styles ici * /
Cela fonctionne très bien, mais si nous devons affiner le style des éléments individuellement, un autre sélecteur doit être créé pour chaque élément. Il peut rapidement devenir plus compliqué et plus difficile à maintenir. Pour contrer cela, l'héritage peut être utilisé. L'héritage est la possibilité pour d'autres sélecteurs CSS d'hériter des propriétés d'un autre sélecteur..
.bloc marge: 10px 5px; rembourrage: 2px; p @extend .block; / * Hériter des styles de '.block' * / border: 1px solid #EEE; ul, ol @extend .block; / * Hériter des styles de '.block' * / color: # 333; text-transform: majuscule;
.bloc, p, ul, ol marge: 10px 5px; rembourrage: 2px; p border: 1px solid #EEE; ul, ol color: # 333; text-transform: majuscule;
MOINS ne prend pas vraiment en charge les styles hérités tels que Sass et Stylus. Au lieu d'ajouter plusieurs sélecteurs à un ensemble de propriétés, il traite l'héritage comme un mixin sans arguments et importe les styles dans leurs propres sélecteurs. L'inconvénient est que les propriétés sont répétées dans votre feuille de style compilée. Voici comment vous le configurer:
.bloc marge: 10px 5px; rembourrage: 2px; p .block; / * Hériter des styles de '.block' * / border: 1px solid #EEE; ul, ol .block; / * Hériter des styles de '.block' * / color: # 333; text-transform: majuscule;
.bloc marge: 10px 5px; rembourrage: 2px; p margin: 10px 5px; rembourrage: 2px; bordure: 1px solide #EEE; ul, ol margin: 10px 5px; rembourrage: 2px; couleur: # 333; text-transform: majuscule;
Comme vous pouvez le voir, les styles de .bloc ont été insérés dans les sélecteurs auxquels nous voulions donner l’héritage. Il est important de noter que la priorité peut devenir un problème ici, alors soyez prudent.
Dans la communauté CSS, l'importation de CSS est mal vue car elle nécessite plusieurs requêtes HTTP. L'importation avec un préprocesseur fonctionne toutefois différemment. Si vous importez un fichier à partir de l’un des trois préprocesseurs, il sera littéralement comprendre l'importation lors de la compilation, créant un seul fichier. Gardez à l'esprit que l'importation régulière .css fichiers compilés avec la valeur par défaut @import "file.css"; code. En outre, les mixins et les variables peuvent être importés et utilisés dans votre feuille de style principale. L'importation rend la création de fichiers séparés pour l'organisation très utile.
/ * fichier. type * / body background: #EEE;
@import "reset.css"; @import "fichier. type"; p background: # 0982C1;
@import "reset.css"; body background: #EEE; p background: # 0982C1;
Les fonctions de couleur sont des fonctions intégrées qui transformeront une couleur lors de la compilation. Cela peut être extrêmement utile pour créer des dégradés, des couleurs plus sombres et bien plus encore..
éclaircir ($ couleur, 10%); / * renvoie une couleur 10% plus claire que $ color * / darken ($ color, 10%); / * renvoie une couleur 10% plus sombre que $ color * / saturate ($ color, 10%); / * renvoie une couleur saturée de 10% supérieure à celle de $ color * / désaturer ($ color, 10%); / * renvoie une couleur 10% moins saturée que $ color * / niveaux de gris ($ color); / * renvoie les niveaux de gris de $ color * / complement ($ color); / * renvoie la couleur complémentaire de $ color * / invert ($ color); / * renvoie la couleur inversée de $ color * / mix ($ color1, $ color2, 50%); / * mélanger $ color1 avec $ color2 avec un poids de 50% * /
Ceci est seulement une courte liste des fonctions couleur disponibles dans Sass. Vous trouverez une liste complète des fonctions couleur Sass disponibles en consultant la documentation Sass..
Les fonctions de couleur peuvent être utilisées partout où une couleur est valide CSS. Voici un exemple:
$ color: # 0982C1; h1 background: $ color; bordure: 3px solide assombrit ($ couleur, 50%);
éclaircir (couleur @ 10%); / * renvoie une couleur 10% plus claire que @color * / darken (@color, 10%); / * renvoie une couleur 10% plus sombre que @color * / saturate (@color, 10%); / * renvoie une couleur saturée de 10% supérieure à celle de @color * / desaturate (@color, 10%); / * renvoie une couleur 10% moins saturée que @color * / spin (@color, 10); / * renvoie une couleur avec une teinte supérieure de 10 degrés à celle de @color * / spin (@color, -10); / * renvoie une couleur avec une teinte inférieure de 10 degrés à celle de @color * / mix (@ color1, @ color2); / * retourne un mélange de @ color1 et de @ color2 * /
Une liste de toutes les fonctions LESS est disponible en lisant la documentation LESS.
Voici un exemple d'utilisation d'une fonction de couleur dans LESS:
@color: # 0982C1; h1 background: @color; bordure: noir foncé 3px (@color, 50%);
éclaircir (couleur, 10%); / * renvoie une couleur 10% plus claire que 'couleur' * / assombrit (couleur, 10%); / * renvoie une couleur 10% plus sombre que 'color' * / saturate (couleur, 10%); / * renvoie une couleur saturée de 10% supérieure à celle de 'couleur' * / désaturée (couleur, 10%); / * renvoie une couleur 10% moins saturée que 'couleur' * /
Vous trouverez une liste complète de toutes les fonctions de couleur du stylet en lisant la documentation de Stylus..
Voici un exemple utilisant les fonctions de couleur Stylus:
couleur = # 0982C1 h1 bordure de couleur d'arrière-plan 3px solide assombrir (couleur, 50%)
Faire des maths en CSS est très utile, et maintenant tout à fait possible. C'est simple et voici comment le faire:
corps marge: (14px / 2); en haut: 50 px + 100 px; à droite: 100px - 50px; à gauche: 10 * 10;
Nous avons traité de nombreuses fonctionnalités et de nouvelles fonctions des pré-processeurs, mais nous n’avons encore couvert aucun aspect pratique ou pratique. Voici une courte liste d'applications du monde réel où l'utilisation d'un pré-processeur vous permet de sauver des vies..
C’est l’une des raisons les plus controversées d’utiliser un pré-processeur et, pour une très bonne raison, cela permet d’économiser beaucoup de temps et de larmes. Créer un mix pour gérer les préfixes des fournisseurs est simple et permet d’économiser beaucoup de répétitions et d’éditions pénibles. Voici comment le faire:
@mixin border-radius ($ values) -webkit-border-radius: $ values; -moz-border-radius: $ valeurs; border-radius: $ valeurs; div @include border-radius (10px);
.border-radius (@values) -webkit-border-radius: @values; -moz-border-radius: @values; border-radius: @values; div .border-radius (10px);
border-radius (valeurs) -webkit-border-radius: valeurs; -moz-border-radius: valeurs; border-radius: valeurs; div border-radius (10px);
div -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Faire semblant de texte 3D avec plusieurs ombres de texte est une idée intelligente. Le seul problème est qu'il est difficile et fastidieux de changer de couleur après coup. À l'aide de mixins et de fonctions de couleur, nous pouvons créer du texte 3D et modifier la couleur à la volée.!
@mixin text3d ($ color) color: $ color; text-shadow: 1px 1px 0px assombrir ($ couleur, 5%), 2px 2px 0px assombrir ($ couleur, 10%), 3px 3px 0px assombrir ($ couleur, 15%), 4px 4px 0px assombrir ($ couleur, 20% ), 4px 4px 2px # 000; h1 font-size: 32pt; @include text3d (# 0982c1);
.text3d (@color) color: @color; text-shadow: 1px 1px 0px assombrit (@ couleur, 5%), 2px 2px 0px assombrit (@ couleur, 10%), 3px 3px 0px assombrit (@ couleur, 15%), 4px 4px 0px assombrit (@ couleur, 20% ), 4px 4px 2px # 000; span taille de la police: 32 pt; .text3d (# 0982c1);
text3d (couleur) couleur: couleur texte-ombre: 1px 1px 0px assombrir (couleur, 5%), 2px 2px 0px assombrir (couleur, 10%), 3px 3px 0px assombrir (couleur, 15%), 4px 4px 0px assombrir (couleur, 10%), 3px 3px 0px assombrir (couleur, 15%), 4px 4px 0px assombrir (couleur , 20%), 4px 4px 2px # 000 span taille de police: 32pt text3d (# 0982c1)
J'ai choisi d'écrire le stylet ombres de texte sur une ligne parce que j'ai omis les accolades.
span taille de la police: 32 pt; couleur: # 0982c1; text-shadow: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px # 000;
Utiliser des opérations sur les nombres et des variables pour les colonnes est une idée que j'ai trouvée lorsque je jouais pour la première fois avec des préprocesseurs CSS. En déclarant une largeur souhaitée dans une variable, nous pouvons facilement la modifier sans aucun calcul mental. Voici comment c'est fait:
$ siteWidth: 1024px; $ gutterWidth: 20px; $ sidebarWidth: 300px; body margin: 0 auto; width: $ siteWidth; .content float: left; width: $ siteWidth - ($ sidebarWidth + $ gutterWidth); .sidebar float: left; marge gauche: $ gutterWidth; width: $ sidebarWidth;
@siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px; body margin: 0 auto; width: @siteWidth; .content float: left; width: @siteWidth - (@ sidebarWidth + @ gutterWidth); .sidebar float: left; margin-left: @gutterWidth; width: @sidebarWidth;
largeur du site = 1024px; gutterWidth = 20px; sidebarWidth = 300px; body margin: 0 auto; width: siteWidth; .content float: left; width: siteWidth - (sidebarWidth + gutterWidth); .sidebar float: left; marge gauche: gutterWidth; width: sidebarWidth;
body margin: 0 auto; largeur: 1024px; .content float: left; largeur: 704px; .sidebar float: left; marge gauche: 20px; largeur: 300px;
L'utilisation d'un préprocesseur CSS présente quelques inconvénients. Je vais passer en revue quelques-unes des plus amusantes, mais si vous êtes vraiment intéressé à toutes les trouver, je vous recommande de parcourir la documentation ou, mieux encore, de commencer à utiliser un pré-processeur dans votre codage quotidien..
Si vous avez écrit CSS assez longtemps, je suis sûr que vous avez atteint un point où vous avez eu une erreur quelque part et que vous ne pouviez tout simplement pas trouver. Si vous êtes un peu comme moi, vous aurez probablement passé l'après-midi à vous tirer les cheveux en peluche et à commenter diverses choses pour chasser l'erreur..
Les préprocesseurs CSS signalent des erreurs. C'est aussi simple que cela. Si quelque chose ne va pas dans votre code, il vous indique où et si vous avez de la chance: pourquoi. Vous pouvez consulter cet article de blog si vous souhaitez voir comment les erreurs sont signalées dans les différents préprocesseurs..
Lors de la compilation avec un préprocesseur CSS, tout commentaire en double barre oblique est supprimé (par exemple,. //commentaire) et tout commentaire slash-astérisque reste (par exemple. / * commentaire * /). Cela dit, utilisez une double barre oblique pour les commentaires de votre choix sur le côté non compilé et un astérisque barre oblique pour les commentaires que vous souhaitez voir visibles après la compilation..
Juste une note: si vous compilez minified, tous les commentaires sont supprimés.
Chaque préprocesseur CSS que nous avons décrit (Sass, LESS et Stylus) a sa propre manière d'accomplir les mêmes tâches en donnant aux développeurs la possibilité d'utiliser des fonctionnalités utiles non prises en charge tout en préservant la compatibilité du navigateur et la propreté du code..
Bien que cela ne soit pas une nécessité de développement, les pré-processeurs peuvent gagner beaucoup de temps et offrir des fonctionnalités très utiles..
Je vous encourage tous à essayer le plus grand nombre possible de pré-processeurs afin de pouvoir choisir votre favori et de savoir pourquoi il est préféré à de nombreux autres. Si vous n'avez pas encore essayé d'utiliser un préprocesseur pour écrire votre code CSS, je vous recommande fortement de l'essayer..
Avez-vous une fonctionnalité de préprocesseur CSS préférée que je n'ai pas mentionnée? Y a-t-il quelque chose que l'on peut faire et que l'autre ne peut pas? Faites-nous savoir dans les commentaires ci-dessous!
Un merci spécial à Karissa Smith, une amie très talentueuse qui a créé la vignette d’aperçu de cet article..
Accentsconagua