In less, we are allowed to define in the form of variables, definition method: @k:v; usage method: @k;
<div ``class``=``"box"``></div>` `<style lang=``"less"``>``@color:red;``@k:100px;``.box{``width:@k;``height:@k;``background: @color;``}``</style>
At this point, there will be a square with a width of 100px, a height of 100px, and a red background displayed on the page;
3. Multi-layer nesting + variable calculation;
<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>
It can be seen that less can be used nestedly, so that we can see the CSS structure clearly at one time; apart from nested use, have you found that its calculation is really powerful?
The above two methods are used more
Detailed link address https://www.cnblogs.com/qdwds/p/11516181.html
Install the easy less plug-in in vscode to convert less files into css files, such as part.less part.css,
write and save in part.less and automatically generate part.css