less语法的使用 vscode中如何使用less

在less，允许我们使用以变量的形式来定义，定义方式：@k:v; 使用方式：@k;

<div ``class``=``"box"``></div>` `<style lang=``"less"``>``@color:red;``@k:100px;``.box{``width:@k;``height:@k;``background: @color;``}``</style>

此时就会有一个宽100px,高100px，背景红色的正方形显示在页面上了;

3、多层嵌套+变量计算；

<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>

可以看到，less可以嵌套使用，让我们一次就可以看清楚css结构；除了嵌套使用，有没有发现他的计算才是真正强大的地方呢？

上面这两种方式用的比较多

详细链接地址 https://www.cnblogs.com/qdwds/p/11516181.html

在vscode中安装easy less插件 就可以把less文件转化为css文件 比如 part.less part.css
在part.less 中编写 保存后自动生成part.css