Moins de langage de style - à quoi ça sert ? MOINS de représentation. Utilisation du fichier LESS et Javascript

Pour simplifier la vie d'un maquettiste, un nombre suffisant de frameworks et de modules complémentaires ont été inventés. Nous allons maintenant parler de simplifier et d'accélérer la rédaction de styles pour les sites Web. À cette fin, comme on le sait, ils sont utilisés tableaux en cascade Styles CSS.

LESS est un surensemble de CSS. LESS est un CSS programmable. LESS s’agrandit Dynamique CSS des fonctionnalités telles que les variables, les mixins et les opérations.

Pour commencer à écrire des styles dans LESS, la connaissance du CSS est suffisante ; vous n'avez pas besoin d'apprendre quoi que ce soit de nouveau. Par conséquent, le seuil d’entrée dans langue donnée très petit.

Comment passer à LESS ?

Puisque LESS utilise la syntaxe CSS, cela signifie que le CSS existant est déjà valide LESS. Pour rendre plus pratique l'utilisation de CSS prêts à l'emploi dans LESS, vous pouvez utiliser services en ligne conversion de CSS en MOINS :

Une fois les styles convertis en LESS, créez un fichier correspondant avec l'extension .less, par exemple style.less .

Usage

Je n'ai pas envisagé l'option d'une compilation à la volée, car le temps de chargement des pages augmente initialement. Par conséquent, il est préférable de convertir manuellement à l’aide d’applications ou de plugins appropriés :

• Sans victoire (OS : Windows)
• Compilateur LESS CSS (plugins IDEA)

Si vous utilisez l'environnement de développement IDEA, je vous recommande d'utiliser un plugin. Lorsque vous perdez le focus du programme, moins sera compilé en CSS, c'est très pratique :)

Une fois que vous avez compris comment travailler avec LESS, vous pouvez passer aux principales fonctionnalités du langage qui valent la peine de l'utiliser :

Variables

Les variables vous permettent de définir des valeurs persistantes en un seul endroit, puis de les réutiliser n'importe où dans votre feuille de style, ce qui facilite la réalisation de modifications globales en une seule ligne de code.

MOINS @color : #4D926F ; #header ( couleur : @color; ) h2 ( couleur : @color ; ) CSS #header ( couleur : #4D926F ; ) h2 ( couleur : #4D926F ; ) Mixins

Les mixins permettent d'inclure toutes les propriétés d'une classe dans une autre classe en mise en marche simple le nom de la classe comme valeur de l'une des propriétés.

MOINS .box-sizing (@a: border-box) ( box-sizing : @a; -webkit-box-sizing : @a; -moz-box-sizing : @a; ) .wrapper ( box-sizing; ) CSS .wrapper ( box-sizing : border-box ; -webkit-box-sizing : border-box ; -moz-box-sizing : border-box ; ) Règles imbriquées

Au lieu de créer de longs noms de sélecteurs pour indiquer l’héritage, dans Less, nous pouvons simplement imbriquer les sélecteurs dans d’autres sélecteurs. Cela rend l’héritage plus clair à comprendre et les feuilles de style plus courtes.

MOINS .content ( a ( décoration de texte : aucune ; &:hover ( décoration de texte : souligné ; ) ) ) CSS .content a ( décoration de texte : aucune ; ) .content a: survol ( décoration de texte : souligné ; ) Opérations

Les opérations vous permettent d'augmenter, de diminuer, de diviser et de multiplier à la fois les valeurs et les couleurs des propriétés, ce qui permet de spécifier des relations complexes entre les propriétés. Très pratique lors de la définition des dimensions des blocs proportionnels. Par exemple, la partie principale du site et la barre latérale.

CSS est un langage simple. Cela nous permet de définir des styles pour Éléments HTMLà l'aide de sélecteurs. C'est facile même pour les débutants.

Cependant, avec le temps, la taille de votre projet Web peut augmenter et vous vous retrouverez avec beaucoup de code CSS en double. Si vous êtes confronté à ce problème, il est temps d'utiliser un préprocesseur CSS.

Dans ce didacticiel, nous expliquerons ce qu'est un préprocesseur CSS et examinerons l'un des plus populaires : LESS.

Qu'est-ce qu'un préprocesseur CSS ?

Les préprocesseurs CSS ne remplacent pas CSS. En fait, les préprocesseurs nous donnent simplement des informations supplémentaires fonctionnalité, tels que des variables, des opérateurs et des fonctions, avec lesquels nous pouvons faciliter la création et la gestion de fichiers CSS.

Les préprocesseurs nous permettent de définir des propriétés une fois puis de les réutiliser dans notre projet, ce qui est bien plus fonctionnel que CSS simple je ne peux pas le faire.

Qu’est-ce que MOINS ?

LESS est un préprocesseur relativement nouveau, vieux d'environ 4 ans. Il est souvent comparé au SASS, un préprocesseur plus ancien. LESS et SASS ont tous deux leurs racines dans le langage de programmation Ruby, mais sont désormais utilisés beaucoup plus largement. LESS est désormais basé sur Javascript.

Les personnes utilisant LESS peuvent créer un ensemble prédéfini de couleurs pour leur site. Ils peuvent définir un style particulier une fois, puis le réutiliser partout où cela est nécessaire.

Utiliser MOINS

Pour profiter de ce que LESS a à offrir, nous devons d'abord enregistrer notre code CSS dans un fichier avec l'extension .moins. LESS est très simple à utiliser. Il fonctionne à la fois côté serveur Web et côté client.

Cette méthode ne fonctionne que dans navigateurs modernes et ne convient que pour une utilisation sur serveur local. Un site de production nécessite une pré-compilation à l'aide de Node sur un serveur web ou de divers outils tiers.

Certains des outils tiers :

• et bien d'autres...

LESS Syntaxe : Variables

Les couleurs sont une des choses qui sont souvent répétées dans un fichier CSS. Les mêmes couleurs sont répétées dans les fichiers CSS pour différents éléments, titres, liens, etc.

#en-tête (
couleur de fond : #CCCCCC
}
.à part (
couleur d'arrière-plan : #CCCCCC ;
couleur : #000000 ;
.sidebar un(
bordure inférieure : 1px solide #CCCCCC ;
}

Dans LESS, on peut simplement déclarer une variable pour stocker la couleur, comme ceci :

@grey : #CCCCCC ;

Et puis réutilisez-le comme ceci :

#en-tête (
couleur d'arrière-plan : @grey;
}
.à part (
couleur d'arrière-plan : @grey;
couleur : #000000 ;
}
.sidebar un(
border-bottom : 1px solid @grey;
}

Nous pouvons également utiliser des variables pour stocker d'autres propriétés telles que la largeur, la hauteur, la taille de la police et bien d'autres valeurs que vous envisagez de réutiliser à différents endroits de style.

LESS Syntaxe : Mixins

Les variables sont utiles pour réutilisation valeurs individuelles, telles que la couleur, la taille de la police. Dans LESS avec les mixins, nous pouvons utiliser un ensemble de propriétés issues d'une ou plusieurs règles. Les mixins peuvent être utilisés, par exemple, pour définir le style de bordure, la taille de la police, etc.

border_top_bottom(
border-top : pointillé 1px #000 ;
bordure inférieure : solide 2px #000 ;
}

Dans le code ci-dessus, nous avons défini le sommet et limite inférieureà l'intérieur de la classe border_top_bottom. Désormais, lorsque nous souhaitons ajouter ces styles à d’autres éléments, nous pouvons les utiliser comme ceci :

#en-tête (
couleur : #000000 ;
.border_top_bottom;
}
.contenu un(
couleur : #000000 ;
.border_top_bottom;
}

Le code ci-dessus affichera ce qui suit :

#en-tête (
couleur : #000000 ;

}
.contenu un(
couleur : #000000 ;
border-top : pointillé 1px #000000 ;
bordure inférieure : solide 2px #000000 ;
}

Pour ajouter plus de flexibilité, les mixins nous permettront également de passer des variables (appelées ici paramètres). Par exemple:

Rayon de bordure (@radius : 5px) (
border-radius : @radius ;
-moz-border-radius : @radius ;
-webkit-border-radius : @radius ;
}

Dans l'exemple ci-dessus, nous avons spécifié un paramètre pour le rayon. Nous lui avons également donné une valeur par défaut de 5px, qui est facultative. Nous voulons maintenant ajouter ceci à la classe bouton :

Bouton (
.border-radius(6px) ;
}

Si nous supprimons 6px de l'exemple ci-dessus, le rayon de la bordure sera défini sur la valeur par défaut, qui est spécifiée dans notre classe border-radius et est de 5px.

LESS Syntaxe : imbrication

L'une des choses courantes en CSS sont les longs sélecteurs, que nous devons souvent écrire pour styliser les éléments enfants :

navigation( )
Navli ( )
navli un ( )
nav li a: survol ( )
navli a.actif ( )
nav li a.visité ( )

Et si vous disposez de plusieurs sous-niveaux dans le menu déroulant, cela devient alors plus difficile à comprendre. En LESS, cela peut s’écrire :

navigation(
li (
un (
& : survol ( )
& :actif ( )
& :visité ( )
}
}
}

Le caractère "&" est utilisé avant les pseudo-classes dans notre structure imbriquée. La conception décrite ci-dessus est beaucoup plus facile à comprendre et montre la hiérarchie exactement telle qu'elle est.

Syntaxe LESS : opérations

LESS nous permet également d'effectuer des opérations telles que l'addition, la soustraction, la multiplication et la division. valeurs numériques, couleurs et variables dans la feuille de style. Disons que nous avons déclaré une variable rembourrage, qui s'applique à tous nos éléments H1. Mais maintenant, nous voulons ajouter un remplissage supplémentaire pour notre en-tête page d'accueil. Nous pouvons procéder ainsi :

@padding : 5px ;
h1 (
remplissage : @padding;
}
h1.page-titre (
rembourrage : (@padding * 2);
}

La valeur par défaut sera multipliée par 2, ce qui donnera à l'en-tête de la page principale un remplissage égal à 10 px. Les opérations doivent être effectuées entre parenthèses, mais elles peuvent également fonctionner sans parenthèses.

LESS Syntaxe : Portée

La portée dans LESS est similaire à la portée dans d’autres langages de programmation. Les variables et les mixins sont d'abord recherchés niveau local, et s'ils ne sont pas trouvés, le compilateur les recherchera dans la portée parent et ainsi de suite.

@var:rouge;

#page (
@var:blanc;

#en-tête (
couleur : @var; // imprimera en blanc
}
}
#pied de page (
couleur : @var; // imprime en rouge
}

Conclusion

Cet article ne couvre pas tout ce que LESS a à offrir. Le but est d'expliquer comment l'utilisation de LESS peut nous aider à rendre notre CSS plus dynamique. Les préprocesseurs CSS nous permettent de créer et de gérer CSS plus efficacement. Même avec une bonne compréhension du CSS, LESS nous permettra de l'utiliser de manière plus productive.

Si vous avez des questions, nous vous recommandons d'utiliser notre

CSS - simple et outil accessible. Cependant, il a ses limites, notamment lorsqu’il s’agit de maintenir le code fini. Lorsque vous devez modifier des milliers de lignes de style réparties sur plusieurs fichiers, la tâche devient un véritable défi.

Créé pour surmonter les problèmes Préprocesseurs CSS, qui vous permettent de combiner des styles de manière dynamique. Il existe plusieurs options (comme LESS et SASS), mais dans cette leçon nous examinerons MOINS.

MOINS Éditeur

Au moment de la rédaction de ce didacticiel, il n'existait qu'un seul éditeur entièrement dédié au travail avec les fichiers LESS : ChrunchApp. Cette application multiplateforme, construit sur Adobe Air, il peut être exécuté sous Windows, Mac OSX et Linux.

Pour d'autres éditeurs (tels que Dreamweaver, Coda, NotePad++ et SublimeText 2), il existe des plugins ou des modules complémentaires qui vous permettent de fournir MOINS de coloration syntaxique.

Utiliser MOINS

LESS est très simple à utiliser. Il vous suffit d'ajouter deux lignes à étiquette de tête ton Document HTML. La première ligne contient le nom de votre fichier .less, et la deuxième ligne contient la connexion de la bibliothèque less.js (elle peut être téléchargée depuis le site officiel).

Dans notre leçon, nous montrerons une autre manière. Nous utiliserons le compilateur LESS : pour Windows, nous pouvons utiliser WinLess, et pour Mac OSX, nous pouvons utiliser LESS.app.

Créez un fichier .less dans le répertoire de travail. Ouvrez ensuite le compilateur (WinLESS ou LESS.app) et importez-y le répertoire de travail. le compilateur trouvera tous les fichiers .less. C'est tout. Désormais, chaque fois que nous modifions le fichier .less, le compilateur générera automatiquement du code CSS normal dans un fichier .css accepté par le navigateur.

Il ne reste plus qu'à nouer Fichier CSS au document HTML :

MOINS de syntaxe

Contrairement au CSS classique, LESS ressemble davantage à un langage de programmation. C'est dynamique, il est donc logique de s'attendre à ce qu'il utilise des variables, des opérations et une portée.

Variables

Regardons d'abord les variables.

Lorsque vous travaillez avec CSS, vous avez probablement souvent rencontré une situation dans laquelle une valeur en double est définie dans plusieurs blocs dans une feuille de style.

Class1 ( couleur d'arrière-plan : #2d5e8b ; ) .class2 ( couleur d'arrière-plan : #fff ; couleur : #2d5e8b ; ) .class3 ( bordure : 1px solide #2d5e8b ; )

Tout va bien jusqu'à ce que vous deviez parcourir 1 000 sections de code identiques dans toute la feuille de style pour modifier la valeur. Cette situation peut survenir lorsque vous travaillez sur un grand projet.

Lors de l'utilisation du préprocesseur LESS, ce problème est facilement résolu à l'aide de variables. Les variables permettent de stocker des valeurs pouvant être réutilisées dans une feuille de style.

@color-base : #2d5e8b ; .class1 ( couleur d'arrière-plan : @color-base ; ) .class2 ( couleur d'arrière-plan : #fff ; couleur : @color-base ; ) .class3 ( bordure : 1px solid @color-base ; )

Dans l'exemple ci-dessus, la variable @color-base stocke la valeur #2d5e8b . Et lorsque vous aurez besoin de changer la couleur, il vous suffira de changer la valeur dans la variable.

Vous pouvez utiliser d'autres valeurs dans la variable :

@font-family : Géorgie @dot-border : pointillé @transition : linéaire @opacity : 0,5

Adjuvants

Dans LESS, vous pouvez utiliser des mixins pour stocker un ensemble de règles et les appliquer à d'autres ensembles. Par exemple:

Dégradés (arrière-plan : #eaeaea ; arrière-plan : gradient-linéaire (haut, #eaeaea, #cccccc); arrière-plan : -o-linear-gradient (haut, #eaeaea, #cccccc); arrière-plan : -ms-linear-gradient (haut , #eaeaea, #cccccc) ; arrière-plan : -moz-linear-gradient(haut, #eaeaea, #cccccc) ; arrière-plan : -webkit-linear-gradient(haut, #eaeaea, #cccccc) ;

Dans l'exemple ci-dessus, nous définissons la couleur du dégradé dans la classe .gradients. Ensuite, lorsque vous devez ajouter un dégradé, il vous suffit d'insérer .gradients comme ceci :

Boîte ( .gradients ; bordure : 1px solide #555 ; rayon de bordure : 3px ; )

La classe .box hérite de toutes les déclarations de .gradients . Par conséquent, l’expression LESS ci-dessus est équivalente au code CSS régulier suivant :

Boîte (arrière-plan : #eaeaea ; arrière-plan : gradient-linéaire (haut, #eaeaea, #cccccc); arrière-plan : -o-linear-gradient (haut, #eaeaea, #cccccc); arrière-plan : -ms-linear-gradient (haut , #eaeaea, #cccccc); arrière-plan : -moz-linear-gradient(top, #eaeaea, #cccccc); arrière-plan : -webkit-linear-gradient(top, #eaeaea, #cccccc) ; )

Lorsque vous travaillez avec CSS3, vous pouvez utiliser la bibliothèque LESS ELements pour faciliter votre travail. LESS Elements est une collection de mixins CSS3 courants qui sont souvent utilisés dans le style, tels que border-radius , gradients , drop-shadow, etc.

Pour utiliser LESS, il vous suffit d'ajouter la règle @import au fichier LESS. Il vous suffit de télécharger la bibliothèque et de la placer dans votre répertoire de travail.

@import "elements.less";

Vous pouvez désormais utiliser toutes les classes de elements.less . Par exemple, pour ajouter un rayon de coin de bordure de 3 px à élément div, vous devez écrire :

Div ( .arrondi(3px); )

Règles imbriquées

Lorsque vous travaillez avec du code CSS standard, cela se produit assez souvent structure suivante code:

Nav ( hauteur : 40 px ; largeur : 100 % ; arrière-plan : # 455868 ; bordure inférieure : 2 px solide # 283744 ; ) nav li ( largeur : 600 px ; hauteur : 40 px ; ) nav li a ( couleur : #fff ; hauteur de ligne : 40px ; ombre du texte : 1px 1px 0px #283744 ;

Dans le code CSS standard, nous sélectionnons les enfants en spécifiant un parent dans chaque ensemble de règles.

Dans LESS, vous pouvez améliorer l'ensemble de règles ci-dessus en imbriquant les enfants dans un élément parent :

Nav ( hauteur : 40 px ; largeur : 100 % ; arrière-plan : # 455868 ; bordure inférieure : 2 px solide # 283744 ; li ( largeur : 600 px ; hauteur : 40 px ; a ( couleur : #fff ; hauteur de ligne : 40 px ; texte- ombre : 1px 1px 0px #283744;

Vous pouvez également utiliser des pseudo-classes, par exemple :hover, en utilisant le caractère esperluette (&). Disons que nous voulons ajouter :hover à la balise link :

A ( couleur : #fff ; hauteur de ligne : 40px ; ombre du texte : 1px 1px 0px #283744 ; &:hover ( couleur d'arrière-plan : #000 ; couleur : #fff; ) )

Opérations

Vous pouvez également utiliser des opérations en LESS. L'addition, la soustraction, la multiplication et la division sont disponibles.

Disons que l'élément B est deux fois plus grand que l'élément A :

@hauteur : 100px .element-A (hauteur : @hauteur ; ) .element-B (hauteur : @hauteur * 2 ; )

Nous définissons d’abord la variable @height et l’attribuons pour indiquer la hauteur de l’élément A.

Dans l'élément B, on multiplie simplement la valeur de la variable par 2. Désormais, lorsque l'on modifie la valeur de la variable @height, l'élément B sera toujours deux fois plus grand.

Portée

LESS utilise le concept de portée. Les variables du contexte local sont utilisées en premier, et si elles ne sont pas là, une recherche est effectuée dans un périmètre plus large.

En-tête ( @color : noir ; background-color : @color ; nav ( @color : bleu ; background-color : @color ; a ( color : @color ; ) ) )

Dans l'exemple ci-dessus, l'en-tête a une variable color définie sur black , mais l'arrière-plan de l'élément nav sera bleu car la variable @color se trouve dans le contexte local.

Conclusion

Dans les prochaines leçons de la série, nous examinerons un exemple de situation réelle. en utilisant MOINS et quelques aspects utiles de la boîte à outils.

CSS est puissant et langue intéressante style de page. C'est rapide et clair, mais surtout, c'est version minimale pris en charge par absolument tous les navigateurs, même les plus petits appareils mobiles ou d'énormes téléviseurs.

Cependant, malgré tous ses avantages incontestables, CSS présente certains, pas même des inconvénients, mais des limites. Ces limitations ne sont pas critiques, mais peuvent prolonger considérablement le temps de développement du projet.

De quelles restrictions s’agit-il ? Par exemple, la couleur. Si nous voyons une entrée comme #FF9F94, alors il est impossible d'établir immédiatement qu'il s'agit d'une couleur pêche foncée. Il est beaucoup plus simple de créer une variable, par exemple darkPeach , de lui attribuer la valeur #FF9F94 puis d'utiliser cette variable dans la feuille de style. Quelles commodités cela peut-il apporter : vous n'avez pas besoin de mémoriser le code couleur pour l'indiquer à un autre endroit ; pour changer une couleur dans tout le tableau, il vous suffit de changer la valeur de la variable.

En d’autres termes, CSS manque un peu de programmation et de logique pour rendre son utilisation plus pratique. C'est bien qu'il existe un certain nombre d'outils pour cela, dont LESS.

Qu’est-ce que MOINS ?

LESS est un langage de style dynamique, une sorte de module complémentaire au CSS qui ajoute un certain ensemble de propriétés dynamiques au CSS : variables, mixins, opérations, fonctions, etc.

LESS est un script qui peut être utilisé aussi bien côté client (la table CSS est calculée dans le navigateur de l'utilisateur) que côté client. Cependant, il existe de meilleures façons d'utiliser LESS, comme la précompilation de la table. Dans ce cas, vous pouvez obtenir tableau standard des styles qui seront utilisés correctement par le navigateur et ne nécessiteront plus de conversion constante.

Variables

Les variables dans LESS fonctionnent exactement de la même manière que dans les autres langages de programmation. Vous créez une variable, lui attribuez une valeur, puis vous pouvez l'utiliser dans n'importe quel Règle CSS. Par exemple:

@serif-font : Géorgie ; h1, h2, h3, h4 (famille de polices : @serif-font ;).large-text (famille de polices : @serif-font ;)

DANS dans ce cas La variable @serif-font stocke le nom de la police. Si vous devez changer la police Georgia en Times Nouveau Romain, il suffit alors de changer la valeur de la variable et la valeur de la police changera tout au long du document. Il est encore plus pratique d'utiliser des variables avec des codes couleurs. Par exemple, l'extrait CSS suivant

Corps (couleur : #ff9900 ; couleur d'arrière-plan : #cccccc ;) p (couleur : #ff9900 ;) h1 (couleur : #ff9900 ;)

peut être remplacé par ce qui suit :

@couleur-orange : #ff9900 ; @couleur-gris : #cccccc ; corps (couleur : @couleur-orange ; couleur d'arrière-plan : @couleur-gris ;) p (couleur : @couleur-orange ;) h1 (couleur : @couleur-orange ;)

Comme vous pouvez le constater, il vous suffit de corriger les couleurs dans l'en-tête de votre document CSS pour les corriger tout au long du document.

Les variables ont des portées. Au sein de chaque règle, vous pouvez réaffecter la valeur d'une variable pour cette règle. Dans l’exemple suivant, la couleur du lien sera blanche et la couleur d’arrière-plan du bouton sera grise :

@color : #sssss ; un bouton ( @color: #ffffff; color:@color;) ( arrière-plan: @color;)

Il est important de noter que les variables de LESS sont plutôt plus proches des constantes, puisqu'il est impossible de les réaffecter plus loin dans le code, uniquement dans le cadre de certaines règles.

Opérations

LESS vous permet d'utiliser des opérations à l'intérieur de règles, ce qui vous permet d'obtenir un contrôle précis sur les valeurs :

Bouton( @unit : 3px ; bordure :@unit solid #ddd ; rembourrage : @unit * 3 ; marge : @unit * 2 ; )

Comme vous pouvez le voir dans le code ci-dessus, la variable @unit est définie sur 3px . Il est remplacé dans la valeur de largeur de bordure. Les indentations sont respectivement obtenues en multipliant cette valeur par 3 ou 2.

Tout peut être utilisé en MOINS opérations arithmétiques. Non seulement les valeurs numériques, mais aussi les couleurs peuvent servir d'opérandes. Effectuez ce qu'on appelle un mélange de couleurs. Si vous souhaitez modifier la valeur d'une couleur, vous pouvez le faire en mélangeant ou en soustrayant une autre couleur :

Bouton (arrière-plan : #941f1f + #222222 ; bordure : #941f1f - #111111 ; )

L'opération en arrière-plan ci-dessus augmentera chaque valeur HEX de 2. Le résultat sera #B64141 - une version plus légère couleur d'origine. L'opération de trame réduira chaque valeur HEX de 1 et produira plus couleur foncée: #830E0E. En pratique, il existe de nombreux cas où l'on commence par couleur de base et nous en avons besoin d'une version légèrement assombrie ou éclaircie.

Travailler avec la couleur

Il existe d'autres possibilités pour travailler avec la couleur. Vous pouvez éclaircir, assombrir, saturer, désaturer et faire pivoter les couleurs. Ceci est réalisé en utilisant des fonctions de couleur.

Pour des exemples d'utilisation et d'affichage des résultats, voir le tableau ci-dessous :

@couleur : #3d82d1 ; .left_box ( background:lighten (@color, 20%); ) .right_box ( background:darken (@color, 20%); )
@color : #3d82d1;.left_box (arrière-plan : désaturer (@color, 18 %); ) .middle_box (arrière-plan : @color; ) .right_box (arrière-plan : saturer (@color, 18 %); )
@color : #3d82d1;.left_box ( arrière-plan : spin (@color, 25%); ) .middle_box ( arrière-plan : @color; ) .right_box ( arrière-plan : spin (@color, -25%); )

Chaque couleur de LESS est convertie en HSL (teinte, saturation, luminosité) pour vous permettre de contrôler les niveaux des canaux. Cela vous permet de manipuler les couleurs plus subtilement, ainsi que d'obtenir directement des informations sur les couleurs :

@couleur = #167e8a; teinte (@couleur); saturation (@couleur); légèreté (@couleur);

A quoi ça sert ? À une personne normale Il est difficile de reconnaître quelle couleur est cryptée avec un code HEX, mais LESS ne fonctionne pas avec le code lui-même, mais avec le ton qu'il donne. Disons que vous trouvez une couleur violette que vous aimez (#e147d4). Mais maintenant, vous avez besoin d'une teinte plus crémeuse, alors la conception suivante de deux fonctions vous aidera :

@couleur : #c480bd ; .class ( couleur d'arrière-plan : désaturer (spin (@color, 18), 12 % );)

Nidification

L’un des principaux avantages du CSS est la possibilité de mettre à jour ses styles en cascade. Autrement dit, pour définir le style d'un paragraphe à l'intérieur du conteneur d'article, vous devez utiliser le code :

Article p (…)

Et c'est bien, mais que se passe-t-il si vous devez définir des styles supplémentaires pour les éléments à l'intérieur de ce bloc. Ensuite, vous devrez constamment ajouter .article avant de commencer à définir la règle. LESS vous permet d'imbriquer les styles les uns dans les autres, simplifiant ainsi l'écriture du code :

A ( couleur:rouge; ) p ( marge:0px; ) article ( a ( couleur: vert; ) p ( couleur: #555; a ( couleur:bleu; ) ) )

L'indentation est facultative, mais elle améliore la lisibilité du code. Les niveaux de nidification ne sont pas limités.

Mixins

Pour créer un cadre arrondi coins supérieurs vous devrez utiliser le code suivant :

Onglet ( -webkit-border-top-left-radius : 6px ; -webkit-border-top-right-radius : 6px; -moz-border-radius-topleft : 6px; -moz-border-radius-topright : 6px; bordure-haut-gauche-rayon : 6px ; bordure-haut-droit-rayon : 6px)

Et ce morceau de code doit être réécrit à chaque fois qu'un tel arrondi doit être effectué. Cela peut être simplifié en utilisant LESS. Pour ce faire, vous devez créer un mix. Regardez l'exemple :

Dessus arrondi ( -webkit-border-top-left-radius : 6px ; -webkit-border-top-right-radius : 6px; -moz-border-radius-topleft : 6px; -moz-border-radius-topright : 6px ; bordure-haut-gauche-rayon : 6px ; bordure-haut-droit-radius : 6px ;

Dans ce cas, nous avons créé et défini une classe à sommet arrondi, puis importé toutes ses règles dans premier de classe. Et tous les styles de la classe supérieure sont importés dans la classe de soumission, y compris les règles relatives à la couleur de l'arrière-plan et du texte.

Si vous utilisez habituellement le même rayon de bordure mais que vous en avez parfois besoin d'un autre, vous devez définir la fusion sur une valeur standard.

Dessus arrondi (@radius:6px) ( -webkit-border-top-left-radius : @radius ; -webkit-border-top-right-radius : @radius ; -moz-border-radius-topleft : @radius ; -moz-border-radius-topright : @radius ; bordure-top-left-radius : @radius ; bordure-top-right-radius : @radius ; arrière-plan : #333 ; couleur :#fff ; .arrondi - haut; ) .submit ( .rounded-top(3px); )

Dans ce cas, la classe tab utilisera une valeur de 6px et la classe submit utilisera une valeur de 3px. Il peut y avoir plusieurs paramètres.

En conclusion, il convient de noter que malgré la valeur de LESS, comme toute autre technologie, elle doit toujours être utilisée à bon escient et ne doit pas être utilisée de manière abusive dans des situations dans lesquelles il est plus pratique d'utiliser du CSS classique. Cependant, dans les situations où LESS est approprié, il deviendra un outil indispensable et utile.

Si nous considérons les préprocesseurs avec CSS, nous obtenons une image plus claire que de considérer le concept de préprocesseur séparément.

Définition

Le préprocesseur CSS (de l'anglais CSS preprocessor) est un module complémentaire à CSS qui ajoute des fonctionnalités auparavant indisponibles à CSS à l'aide de nouvelles constructions syntaxiques.

La tâche principale du préprocesseur est de fournir des structures syntaxiques pratiques permettant au développeur de simplifier et ainsi d'accélérer le développement et la prise en charge des styles dans les projets.

Les préprocesseurs CSS convertissent le code écrit à l'aide d'un langage de préprocesseur en code CSS propre et valide.

Avec les préprocesseurs, vous pouvez écrire du code qui cible :

• Lisibilité humaine
• Structuré et logique
• Performance

Et ce n’est qu’une petite partie de ce que le préprocesseur peut vous offrir. Mais ne vous précipitez pas.

Sucre syntaxique

Avant d'examiner plus en détail les préprocesseurs CSS, mettons à jour notre lexique avec un nouveau concept : le sucre syntaxique.

Le sucre syntaxique (de l'anglais syntaxic sugar) est un ajout à la syntaxe d'un langage de programmation qui n'introduit aucun changement significatif ni aucune nouvelle fonctionnalité, mais rend le langage plus lisible pour les humains.

Le sucre syntaxique introduit dans le langage options alternatives enregistrements de constructions intégrées dans cette langue. Par options d'enregistrement alternatives, nous entendons des conceptions pratiques pour les humains, qui seront finalement convertis par le préprocesseur en langue source, sans sucre syntaxique.

Si nous essayons d'appliquer ce concept aux préprocesseurs CSS, alors il cas général, décrit pleinement leur essence. Permettez-moi de vous rappeler une fois de plus que la tâche principale des préprocesseurs est de simplifier et d'accélérer le développement, mais comment y parvenir autrement si vous n'introduisez pas d'options d'enregistrement alternatives ?

Quels types de préprocesseurs CSS existe-t-il ?

Il est temps de passer à autre chose exemples spécifiques, à savoir aux préprocesseurs CSS eux-mêmes. Au moment de la rédaction de cet article, il existe trois préprocesseurs populaires :

• Sass (SCSS)
• Style

Et quelques acteurs mineurs pour nous :

• Feuilles de style de fermeture
• Écrasement CSS

Nous parlerons des trois premiers séparément un peu plus bas, mais nous ne parlerons pas du tout des deux derniers, en raison de leur impopularité. Si vous le souhaitez, les descriptions de ces préprocesseurs peuvent être facilement trouvées dans un moteur de recherche.

Quel est l'intérêt d'utiliser des préprocesseurs ?

Comme je l'ai noté plus haut, les principaux avantages sont la lisibilité du code, la structuration et l'augmentation de la productivité.

Il existe également d’autres raisons de commencer à utiliser un préprocesseur aujourd’hui. Je tiens à attirer l'attention sur ce point, car les développeurs du passé, et beaucoup encore aujourd'hui, refusent d'utiliser des préprocesseurs, les trouvant complexes, incompréhensibles et inutiles.

CSS est difficile

Le CSS standard est difficile. La syntaxe non imbriquée proposée par les préprocesseurs CSS est tout simplement difficile à lire. De plus, vous devez vous souvenir du nom du parent lors de l'imbrication. Le manque de variables et de « fonctions » normales rend le code CSS compliqué et étroit.

Documentation disponible

Il est révolu le temps où la documentation des préprocesseurs n'était disponible que pour les personnes « averties ». Désormais, n'importe qui peut maîtriser n'importe lequel des préprocesseurs dans les plus brefs délais, et avec coûts minimes force

Facilité d'utilisation

L’utilisation de préprocesseurs est plus simple qu’avant et beaucoup plus simple. Pour ce faire, il vous suffit d'installer un programme qui surveillera les fichiers destinés au préprocesseur, et lorsqu'ils changeront, compilera le contenu de ces fichiers en code CSS pur.

Pour les utilisateurs plus avancés, il existe des générateurs de projets spéciaux. Ne pensez pas que ce n'est pas parce que vous utilisez un programme de préprocesseur plutôt qu'un générateur de projet que vous n'êtes pas assez cool. En fait, ces robinets offrent contrôle total et des paramètres avancés, mais ne font pas de vous un Jedi.

Structure et cohérence du code

La fonctionnalité la plus populaire offerte par tout préprocesseur CSS est la possibilité d'imbriquer les sélecteurs les uns dans les autres. Je ne donnerai pas d'exemple maintenant, puisque la partie correspondante du livre sera écrite sur les capacités de Less, y compris l'imbrication. À ce stade, tout ce que vous devez savoir, c'est que lorsque vous utilisez des préprocesseurs, vous pouvez imbriquer un sélecteur dans un autre, et un autre dans un autre, ce qui donne lieu à quelque chose de similaire à la table des matières d'un livre :

1. Sélecteur de parents 1.1. Sélecteur imbriqué 1.2. Sélecteur imbriqué 1.2.1. Sélecteur imbriqué 1.3. Sélecteur imbriqué

Bien entendu, dans la vraie vie les sélecteurs ne peuvent pas commencer par des nombres, cependant, pour faire un parallèle entre l'imbrication et la table des matières, je pense qu'une telle omission est appropriée ici.

Impuretés

Pour le dire très brièvement, en utilisant des mixins (de l'anglais Mixins), vous pouvez rendre le code réutilisable. Cela permet d'éviter les classes d'assistance dans le balisage ou la duplication des propriétés d'un sélecteur à l'autre.

Modularité

Un autre bonus qui me persuaderait de commencer à utiliser un préprocesseur CSS dès maintenant serait la possibilité d'imbriquer des fichiers dans des fichiers, c'est-à-dire, en d'autres termes, de concaténer des fichiers dans une séquence donnée. Oui, cela peut être organisé sur CSS pur, mais couplé à d’autres fonctionnalités, il s’avère être un outil très puissant.

En même temps, nous avons la possibilité de partager des modules (bibliothèques mixin) que nous avons créés pour nos besoins et que nous avons trouvés utiles à d'autres personnes. Il s'avère que n'importe quel développeur peut télécharger votre bibliothèque et l'utiliser à ses propres fins, en appelant les mixins que vous avez écrits selon vos besoins.

Pourquoi ne pas attendre que CSS évolue ?

Le développement du CSS prend des mesures très minimes et incertaines, car le W3C donne la priorité à la vitesse de réponse du CSS (performance). D'une part, c'est correct et très important, mais d'autre part, c'est un manque de commodité pour les développeurs.

À titre d'exemple, j'utiliserai l'une des spécifications CSS4, qui a été introduite sous la pression des développeurs - le sélecteur parent. Donc long-courrier de l'idée à la décision était due au fait que le W3C considérait qu'un tel sélecteur était lent et que son utilisation ultérieure sur les sites entraînerait des ralentissements sauvages. Bien entendu, nous parlons de l'utilisation généralisée de ce sélecteur, et non de cas isolés.

Ne vous attendez donc pas à des révolutions et à des changements dans un avenir proche qui pourraient éclipser les fonctionnalités et les capacités des préprocesseurs CSS.

Types de préprocesseurs

Bien sûr, comme dans tout autre domaine, il y a toujours de la concurrence, et sur le marché des préprocesseurs, il existe désormais trois camps principaux en guerre :

• Sass (SCSS)
• Style

Je les qualifie d'hostiles, car chaque adepte de l'un des préprocesseurs considère qu'il est de son devoir de jeter des impuretés sur les représentants d'autres confessions, disons. Cette hostilité est particulièrement courante parmi les fans du préprocesseur Sass, considéré comme le plus ancien et le plus puissant des trois préprocesseurs.

Pour avoir une image complète, je veux donner brève information pour chaque préprocesseur :

Moins

En fait, le héros de ce livre. Le préprocesseur le plus populaire au moment de la rédaction. Fondé en 2009 par Alexis Sellier et écrit en JavaScript (écrit à l'origine en Ruby, mais Alexis l'a fait avec le temps la bonne étape). A tout capacités de base préprocesseurs et encore plus, mais n'a pas de structures et de boucles conditionnelles au sens habituel pour nous. Le principal avantage est sa simplicité, presque standard pour Syntaxe CSS et la possibilité d'étendre les fonctionnalités via un système de plugins.

Sass (SCSS)

Le plus puissant des préprocesseurs CSS. Possède une communauté de développeurs assez importante. Fondé en 2007 en tant que module pour HAML et écrit en Ruby (il existe un portage vers C++). Il a une gamme de capacités beaucoup plus large que Less. Les capacités du préprocesseur lui-même sont étendues par la bibliothèque multifonctionnelle Compass, qui vous permet d'aller au-delà Cadre CSS et travaillez, par exemple, avec des sprites en mode automatique.

A deux syntaxes :

• Sass (Syntaxically Awesome Style Sheets) est une syntaxe CSS simplifiée basée sur l'identité. Considéré comme obsolète.
• SCSS (Sassy CSS) - basé sur la syntaxe CSS standard.

Style

Le préprocesseur CSS le plus jeune, mais en même temps le plus prometteur. Fondée en 2010 par une personnalité bien connue de nos milieux, TJ Holowaychuk. Ils disent que c'est le préprocesseur le plus pratique et le plus extensible, et qu'il est également plus flexible que Sass. Écrit en JavaScript. Prend en charge de nombreuses options de syntaxe, du style CSS au simplifié (manquant : , ; , () et quelques parenthèses).