En moins, il nous est permis de définir sous forme de variables, méthode de définition : @k:v ; méthode d'utilisation : @k;
<div ``class``=``"box"``></div>` `<style lang=``"less"``>``@color:red;``@k:100px;``.box{``width:@k;``height:@k;``background: @color;``}``</style>
À ce stade, un carré d'une largeur de 100 pixels, d'une hauteur de 100 pixels et d'un fond rouge s'affichera sur la page ;
3. Imbrication multicouche + calcul variable ;
<div ``class``=``"box1"``>`` ``<div ``class``=``"box2"``>`` ``<div ``class``=``"box3"``></div>`` ``</div>``</div>` `<style lang=``"less"``>``@k:100px;`` ``.box1{`` ``width: @k;`` ``height:@k;`` ``background: red;`` ``.box2{`` ``width: @k/2;`` ``height:@k/2;`` ``background: green;`` ``.box3{`` ``width: @k/3;`` ``height:@k/3;`` ``background: blue;`` ``}`` ``}`` ``}``</style>
On peut voir que less peut être utilisé de manière imbriquée, de sorte que nous pouvons voir clairement la structure CSS à un moment donné ; en dehors de l'utilisation imbriquée, avez-vous trouvé que son calcul est vraiment puissant ?
Les deux méthodes ci-dessus sont utilisées plus
Adresse de lien détaillée https://www.cnblogs.com/qdwds/p/11516181.html
Installez le plug-in easy less dans vscode pour convertir le fichier less en un fichier css, tel que part.less part.css,
écrivez et enregistrez dans part.less et générez automatiquement part.css