Table des matières
@rule imbrication et bouillonnement
8. Espaces de noms et accesseurs
1. Introduction à moins
Less est un langage de prétraitement CSS, qui étend le langage CSS et ajoute des fonctionnalités telles que des variables, des Mixins et des fonctions, ce qui facilite la maintenance et l'extension de CSS. Less peut fonctionner sur Node ou le navigateur.
Utilisez moins dans l'environnement de nœud :
installez moins globalement
npm i -g lessInstaller moins localement
npm i -S lessVoir moins de version
lessc -vConvertir des fichiers .less en fichiers .css
lessc styles.less styles.cssUtiliser moins dans l'environnement du navigateur :
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- 需要一个less编译器 需要引入less -->
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>Installer un plugin dans vscode : Easy LESS, ce plugin peut convertir automatiquement les fichiers .less en fichiers .css.
2. Variables
Dans le code suivant : @mycolor est une variable avec une valeur de rouge
@mycolor:red;
body{
color: @mycolor
}Compiler en CSS :
body {
color: red;
}3. Mélangez
Un mixin est une méthode d'inclusion (ou de mélange) d'un ensemble de propriétés d'un ensemble de règles dans un autre.
Pour utiliser mixin, ajoutez simplement des parenthèses ()
#one{
font-size: 28px;
color: teal;
font-family: '楷体';
}
.header{
background-color: #fff;
}
body{
color: red;
// 使用混入
#one();
.header()
};Compiler en CSS :
#one {
font-size: 28px;
color: teal;
font-family: '楷体';
}
.header {
background-color: #fff;
}
body {
color: red;
font-size: 28px;
color: teal;
font-family: '楷体';
background-color: #fff;
}4. Nidification
Less offre la possibilité d'utiliser l'imbrication au lieu ou en conjonction avec la cascade.
div{
// & 表示当前选择器
&>a{
text-decoration: none;
}
.one{
color: red;
}
}Compiler en CSS :
div > a {
text-decoration: none;
}
div .one {
color: red;
}@rule imbrication et bouillonnement
Les @règles (telles que @media ou @supports) peuvent être imbriquées de la même manière que les sélecteurs. La règle @ est placée en premier et l'ordre relatif des autres éléments dans le même ensemble de règles reste inchangé. C'est ce qu'on appelle le bouillonnement
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-color: red;
}
}
@media (min-width: 1280px) {
width: 800px;
}
}Compiler en CSS :
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-color: red;
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}5. Fonctionnement
Les opérateurs arithmétiques +, -, *, / peuvent opérer sur n'importe quel nombre, couleur ou variable. Lorsque cela est possible, les opérateurs arithmétiques effectuent des conversions d'unités avant l'addition, la soustraction ou la comparaison. Le résultat du calcul est basé sur le type d'unité de l'opérande le plus à gauche. Les unités sont ignorées si la conversion d'unités est invalide ou sans signification. Conversion d'unité non valide, par exemple px en cm ou rad en % de conversion.
div{
width: 100px + 50rem; //以第一个像素单位为准
width: 100rem + 50px; //以第一个像素单位为准
width: 100px + 10cm; //以实际操作为准
width: 10cm * 2rem; //以第一个单位为准
color: (#224488 / 2);
color: #112244 + #111;
}Compiler en CSS :
div {
width: 150px;
width: 150rem;
width: 477.95275591px;
width: 20cm;
color: #112244;
color: #223355;
}calc() cas particulier
calc() Les expressions mathématiques ne sont pas évaluées, mais les variables et les valeurs des formules mathématiques sont évaluées dans les fonctions imbriquées.
div{
width: calc(100px + 20px)
}Compiler en CSS :
div {
width: calc(100px + 20px);
}6. S'échapper
L'échappement vous permet d'utiliser des chaînes arbitraires comme valeurs de propriété ou de variable. Le contenu sous quelque forme ~"anything" que ce soit sera publié tel quel.~'anything'
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
background-color: blue;
}
}Compiler en CSS :
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
background-color: blue;
}
}7. Fonction
Less a une variété de fonctions intégrées pour convertir les couleurs, traiter les chaînes, les opérations arithmétiques, etc. Ces fonctions sont décrites en détail dans le manuel des fonctions Less .
Le code suivant utilise la fonction de pourcentage pour convertir 0,5 à 50 % et utilise la fonction de saturation pour augmenter la saturation des couleurs de 5 %
@mycolor:orange;
@width:0.5;
.element{
color: saturate(@mycolor,85%);
width: percentage(@width,0.5);
}Compiler en CSS :
.element {
color: #ffa500;
width: 50%;
}8. Espaces de noms et accesseurs
Parfois, vous souhaitez regrouper des mixins à des fins d'organisation ou simplement pour fournir une encapsulation. Vous pouvez utiliser Moins pour répondre à cette exigence de manière plus intuitive. Supposons que vous souhaitiez mettre des mixins et des variables sous le capot #one pour une réutilisation ou une distribution ultérieure :
#one{
.button{
font-size: 28px;
background-color: blue;
}
.button1{
font-family: '宋体';
}
}
body{
color: red;
// 使用
#one.button();
}
Compiler en CSS :
#one .button {
font-size: 28px;
background-color: blue;
}
#one .button1 {
font-family: '宋体';
}
body {
color: red;
font-size: 28px;
background-color: blue;
}9. Cartographie
Vous pouvez utiliser des mixins et des ensembles de règles comme cartes d'un ensemble de valeurs.
Utilisez des crochets [] pour obtenir une règle
#one{
.button{
font-size: 28px;
background-color: blue;
}
}
body{
color: red;
// 使用
font-family: #one.button[font-size];
}Compiler en CSS :
#one .button {
font-size: 28px;
background-color: blue;
}
body {
color: red;
font-family: 28px;
}10. Portée
La portée dans Less est très similaire à la portée dans CSS. Les variables et les mixins sont d'abord recherchés localement et, s'ils ne sont pas trouvés, sont hérités de la portée de niveau "parent".
@mycolor:orange;
.element{
@mycolor: teal;
color: @mycolor; //当前作用域有@mycolor变量，因此color会取teal
}Compiler en CSS :
.element {
color: teal;
}11. Remarques
Moins de commentaires sont les mêmes que les commentaires css :
// commentaires sur une seule ligne
/* Commentaire multi-lignes */
12. Importer
Vous pouvez importer un .less fichier et toutes les variables de ce fichier peuvent être utilisées dans leur intégralité. Si le fichier importé a .less une extension, l'extension peut être omise :
@import "library"; // library.less
@import "typo.css";