less的使用方法

一、安装插件

1、在插件市场中搜索 Easy LESS 进行安装

2、在settings.json中设置less编译配置

文件--->首选项--->设置--->在右上角 打开设置--->settings.json

3、在settings文件中添加以下配置

"less.compile": {

"outExt": ".css"

},

二、less语法

1、在项目的css文件夹中声明demo.less

2、在保存demo.less文件时自动生成demo.css文件

3、编写less文件

4、声明变量

@w-100:100px;

@theme-color:red;

5、使用变量

height: @size-100;

background-color: @theme_color;

6、Mixin(混入)

先声明一个类样式，在其它的样式中直接使用

.bordered {

border: 1px solid black;

}

#app{

...

.bordered();

...

}

7、&符号表示当前选择器本身(#app)

&::after {

display: block;

}

&>img {

display: block;

}

8、数学运算（+-*/）可以对数字、颜色、变量进行运算

@size= @size-100*2; //200px

@size1 = 1px*2cm; // 2px

@size2 = 1px + 2cm; //3px

@size3 = 1cm + 10mm; //2cm

@size4 = #224488 / 2; // #112244;

9、calc()用于计算变量或长度之间的值，注意 + - 前后必须加空格否则不起作用

@var = 50vh/2;

width:calc(50% + (@var - 20px));

10、字符串转义，告诉less不要编译，直接交给css处理

~"要转义的内容"

width: ~'calc(50% + (50vh/2 - 20px))';

11、导入

@import "libary" ;//引入是libary.less

@import "common.css";

12、注释

//单行注释

/*多行注释*/