MOINS CSS - Guide du débutant

Le préprocesseur CSS est devenu un élément essentiel du développement Web. Il fournit des CSS simples avec des traits de programmation tels que Variables, Fonctions ou Mixin et Opération, qui permettent aux développeurs Web de créer styles CSS modulaires, évolutifs et plus faciles à gérer.

Dans ce billet, nous allons nous intéresser à LESS, l’un des pré-processeurs CSS les plus populaires du moment, et largement déployé dans de nombreux frameworks frontaux comme Bootstrap. Nous allons aussi marcher à travers le utilitaires, outils et configurations de base pour vous aider à utiliser LESS.

Le compilateur

Pour commencer, nous devrons installer un compilateur. La syntaxe LESS est non standard, selon les spécifications du W3C. Le navigateur ne serait pas en mesure de traiter et de restituer la sortie, en dépit de traits hérités similaires à ceux de CSS.

Voici un aperçu du code MOINS:

 @ couleur-base: # 2d5e8b; .class1 background-color: @ color-base; .class2 background-color: #fff; couleur: @ couleur-base;

Le compilateur traitera le code et transformera la syntaxe LESS en un format CSS compatible avec le navigateur:

 .class1 background-color: # 2d5e8b;  .class1 .class2 background-color: #fff; couleur: # 2d5e8b;

Il existe un certain nombre d'outils pour compiler CSS:

Utiliser JavaScript

MOINS vient avec un less.js fichier qui est vraiment facile à déployer sur votre site web. Créer une feuille de style avec .Moins extension et le lier dans votre document en utilisant le rel = "stylesheet / less" attribut.

Vous pouvez obtenir le fichier JS ici, le télécharger via le gestionnaire de paquets Bower, sinon créer un lien direct vers CDN, comme suit:

Vous êtes tous ensemble et pouvez composer des styles dans le .Moins. La syntaxe LESS sera compilée à la volée au chargement de la page. Garde en tête que l'utilisation de JavaScript est déconseillée au stade de la production car cela affecterait gravement les performances du site.

Vous devez toujours toujours compiler la syntaxe LESS au préalable et uniquement servir des CSS réguliers au lieu. Vous pouvez utiliser Terminal, une tâche comme Runner Grognement ou Gorgée, ou une application graphique pour le faire.

Utilisation de la CLI

LESS fournit une interface de ligne de commande (CLI) native, lessc, qui gère plusieurs tâches au-delà de la compilation de la syntaxe LESS. À l'aide de la CLI, nous pouvons insérer des codes, compresser les fichiers et créer une carte source. La commande est basée sur Node.js, ce qui lui permet de fonctionner sous Windows, OS X et Linux..

Assurez-vous que Node.js a été installé (sinon, installez le programme d'installation ici), puis installez LESS CLI via NPM (Node Package Manager) à l'aide de la ligne de commande suivante..

 npm install -g less

Maintenant vous avez le lessc commande à votre disposition pour compiler LESS en CSS:

 lessc style.less style.css

Utiliser Task Runner

Task Runner est un outil qui automatise les tâches de développement et les flux de travail. Plutôt que de lancer le lessc chaque fois que nous souhaitons compiler nos codes, nous pouvons configurer l’installation d’un programme d’exécution des tâches et le configurer pour surveiller les modifications dans nos fichiers LESS et compiler immédiatement LESS en CSS..

Deux outils populaires dans cette catégorie sont aujourd'hui Grunt et Gulp. Nous avons une série de messages qui couvrent ces outils. Consultez nos publications pour savoir comment déployer ces outils dans votre flux de travail.

Comment utiliser Grunt pour automatiser votre flux de travail
Débuter avec Gulp.js
La bataille des scripts de construction: Gulp Vs Grunt

Utilisation d'une application graphique

Ceux qui ne sont peut-être pas habitués à utiliser Terminal et les lignes de commande peuvent opter pour une interface graphique. Il existe de nombreuses applications pour compiler LESS aujourd’hui sur toutes les plateformes - certaines sont gratuites, d’autres payantes.

Voici la liste complète:

App	Plate-forme	Coût
Mélange	OS X / Windows	Libre
Koala	OS X / Windows / Linux	Libre
Prepros	OS X / Windows	Freemium (USD29)
WinLESS	les fenêtres	Libre
CodeKit	OS X	32 USD

Le compilateur que vous choisissez (hormis JavaScript) n’a pas vraiment d’importance, tant que l’outil fonctionne et complète votre flux de travail, allez-y..

L'éditeur de code

Vous pouvez utiliser n'importe quel éditeur de code. Installez simplement un plugin ou une extension pour mettre en évidence la syntaxe LESS avec les couleurs appropriées. Cette fonctionnalité est désormais disponible pour la plupart des éditeurs de code et des IDE, notamment SublimeText, Notepad ++, VisualStudio, TextMate et Eclipse..

Maintenant que le compilateur et l'éditeur de code sont tous définis, nous pouvons commencer à écrire des styles CSS avec la syntaxe LESS.

Syntaxe MOINS

Contrairement aux CSS classiques tels que nous les connaissons, LESS fonctionne beaucoup plus comme un langage de programmation. C'est dynamique, alors attendez-vous à trouver des terminologies comme Variables, Opération et Portée le long du chemin.

Variables

Tout d’abord, jetons un coup d’œil à la Variables.

Si vous travaillez assez longtemps avec CSS, vous avez probablement écrit quelque chose comme ceci, où nous avons des valeurs répétitives assignées dans des blocs de déclaration dans la feuille de style entière..

 .class1 background-color: # 2d5e8b;  .class2 background-color: #fff; couleur: # 2d5e8b;  .class3 border: 1px solid # 2d5e8b;

En fait, cette pratique est bonne - jusqu’à ce que nous ayons à passer au crible plus de un millier d'extraits similaires à travers la feuille de style. Cela pourrait se produire lors de la création d'un site Web à grande échelle. Le travail deviendra fastidieux.

Si nous utilisons un préprocesseur CSS comme LESS, l’instance ci-dessus ne poserait pas de problème - nous pouvons utiliser Variables. Les variables nous permettront de stocker une constante valeur qui peut être réutilisée plus tard dans la feuille de style.

 @ couleur-base: # 2d5e8b; .class1 background-color: @ color-base;  .class2 background-color: #fff; couleur: @ couleur-base;  .class3 border: 1px solid @ color-base;

Dans l'exemple ci-dessus, nous stockons la couleur # 2d5e8b dans le @ couleur-base variable. Quand vous voulez changer la couleur, il suffit de changer la valeur dans cette variable.

En plus de la couleur, vous pouvez également mettre d'autres valeurs dans les variables, comme par exemple:

 @ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5

Mixins

En MOINS, nous pouvons utiliser Mixins pour réutiliser des déclarations entières dans un jeu de règles CSS dans un autre jeu de règles. Voici un exemple:

 .dégradés arrière-plan: #eaeaea; fond: linéaire-dégradé (haut, #eaea, #cccccc); arrière-plan: -o-linear-gradient (top, #eaeaea, #cccccc); arrière-plan: -ms-linear-gradient (top, #eaeaea, #cccccc); arrière-plan: -moz-linear-gradient (en haut, #eaeaea, #cccccc); arrière-plan: -webkit-linear-gradient (haut, #eaeaea, #cccccc);

Dans l'extrait ci-dessus, nous avons prédéfini une valeur par défaut pente couleur à l'intérieur du .les gradients classe. Chaque fois que nous voulons ajouter les gradients, nous insérons simplement le .les gradients par ici:

 div .gradients; bordure: 1px solide # 555; border-radius: 3px;

le .boîte héritera de tout le bloc de déclaration à l'intérieur du .les gradients. Ainsi, la règle CSS ci-dessus est égale à la CSS simple suivante:

 div background: #eaeaea; fond: linéaire-dégradé (haut, #eaea, #cccccc); arrière-plan: -o-linear-gradient (top, #eaeaea, #cccccc); arrière-plan: -ms-linear-gradient (top, #eaeaea, #cccccc); arrière-plan: -moz-linear-gradient (en haut, #eaeaea, #cccccc); arrière-plan: -webkit-linear-gradient (haut, #eaeaea, #cccccc); bordure: 1px solide # 555; border-radius: 3px;

De plus, si vous utilisez beaucoup CSS3 sur votre site Web, vous pouvez utiliser LESS Elements pour vous faciliter la tâche. LESS Elements est une collection de CSS3 Mixins que nous pouvons utiliser souvent dans les feuilles de style, telles que rayon de la frontière, les gradients, ombre portée etc.

Pour utiliser LESS Elements, ajoutez simplement le @importation règle dans votre feuille de style LESS, mais n'oubliez pas de la télécharger d'abord et de l'ajouter à votre répertoire de travail.

 @import "elements.less";

Nous pouvons maintenant réutiliser tous les Des classes fourni par le elements.less, par exemple, pour ajouter 3px rayon de la frontière à un div, nous pouvons écrire:

 div .rounded (3px);

Pour une utilisation ultérieure, veuillez vous reporter à la documentation officielle..

Règles imbriquées

Lorsque vous écrivez des styles en CSS simple, vous pouvez également avoir traversé ces structures de code typiques.

 nav hauteur: 40px; largeur: 100%; arrière-plan: # 455868; fond de bordure: solide 2px # 283744;  nav li width: 600px; hauteur: 40px;  nav li a color: #fff; hauteur de ligne: 40px; text-shadow: 1px 1px 0px # 283744;

En langage CSS simple, nous sélectionnons des éléments enfants en ciblant d’abord le parent dans chaque ensemble de règles, ce qui est considérablement redondant si nous suivons les étapes ci-dessous. “les meilleures pratiques” principe.

En MOINS CSS, nous pouvons simplifier les jeux de règles en imbriquer les éléments enfants à l'intérieur des parents, comme suit;

 nav hauteur: 40px; largeur: 100%; arrière-plan: # 455868; fond de bordure: solide 2px # 283744; li largeur: 600px; hauteur: 40px; a color: #fff; hauteur de ligne: 40px; text-shadow: 1px 1px 0px # 283744;

Vous pouvez aussi assigner pseudo-classes, comme :flotter, au sélecteur à l'aide du symbole et commercial (&).

Disons que nous voulons ajouter :flotter à la balise d'ancrage ci-dessus, nous pouvons l'écrire de cette façon:

 a color: #fff; hauteur de ligne: 40px; text-shadow: 1px 1px 0px # 283744; &: hover background-color: # 000; couleur: #fff;

Opération

Nous pouvons également effectuer des opérations dans MOINS, telles que addition, soustraction, multiplication et division aux nombres, couleurs et variables dans la feuille de style.

Disons que nous voulons que l'élément B soit deux fois plus élevé que l'élément A. Dans ce cas, nous pouvons l'écrire comme suit:

 @height: 100px .element-A height: @height;  .element-B height: @height * 2;

Comme vous pouvez le voir ci-dessus, nous stockons d’abord la valeur dans le @la taille variable, puis attribuez la valeur à l'élément A.

Dans l'élément B, plutôt que de calculer nous-mêmes la hauteur, on peut multiplier la hauteur par 2 en utilisant l'opérateur astérisque (*). Maintenant, chaque fois que nous changeons la valeur dans le @la taille variable, élément B aura toujours deux fois la hauteur.

Découvrez des exemples d'opérations plus avancés dans notre précédent tutoriel: Conception d'une barre de navigation de menus glissants.

Portée

MOINS applique le Portée concept, où les variables seront héritées en premier de la portée locale, et quand elles ne sont pas disponibles localement, il cherchera dans une portée plus large.

 en-tête @ couleur: noir; couleur de fond: @color; nav @color: blue; couleur de fond: @color; a color: @color;

Dans l'exemple ci-dessus, le entête a un noir couleur de fond, mais navLa couleur de fond de bleu comme il a la variable @color dans sa portée locale, tandis que le une aura également le bleu qui est hérité de son plus proche parent, nav.

Pensée finale

En fin de compte, nous espérons que cet article pourra vous donner une compréhension de base sur la meilleure façon d’écrire CSS à l’aide de LESS. Vous vous sentez peut-être un peu gênant au début, mais si vous l'essayez plus souvent, cela deviendra sûrement beaucoup plus facile..

Voici quelques tutoriels sur lesquels je vous encourage à rechercher d'autres astuces et pratiques, qui peuvent vous aider à pousser votre compétence MOINS au niveau supérieur..

MOINS CSS Tutoriel: Conception d'une barre de navigation de menu lisse
Comprendre MOINS fonctions de couleur
3 nouvelles fonctionnalités MOINS CSS à connaître