less工具的简单操作

一.以vscode为例子使用:

1.安装node.js

2.安装less npm install less -g

3.在VSCode中。搜索插件 Easy LESS 安装

4.在项目文件中会生成.vscode文件,在里面找到settings.json,然后在里面放入这行代码即可:

  "less.compile": {
                                    "compress": false, // true => remove surplus whitespace 是否删除多余空白字符
                                    "sourceMap": false, // true => generate source maps (.css.map files) 是否创建文件目录树，true表示自动生成一个.css.map文件 ${workspaceRoot} \\css ${workspaceRoot} 代表当前项目的根目录，后面路径自行配置。 less和css文件之间的对应关系
                                    "out": true, // false => DON'T output .css files (overridable per-file, see below) 是否编译输出文件
                                    //"outExt":".wxss",//输出文件的后缀，默认为.css 小程序中也是用less
                                }
                            }

5.在新建的.less文件里面写你需要的样式，保存后，会自动在同级目录下，生成同样名称的css文件

二.语法:

1.变量:
(1)选择器变量
语法:@名称声明：选择器名
使用:@{名称声明}

/*less*/
@selector: .className;
@{selector}{
	width:100%;
};
/*css*/
.className {
  width: 100%;
}

(2).属性变量
语法:@名称声明：选择器名
使用:@{名称声明}

/*less*/
@borderstyle: boderstyle;
@solid: solid;
div{
@{borderstyle}: @solid
}
/*css*/
div {
  boderstyle: solid;
}

(3). url变量
语法:@名称声明：“xxxx” 需要加引号

/*less*/
@documentRoot: "../public/img";
body{
	background: url("@{documentRoot}/logo.png");
}
/*css*/
body {
  background: url("../public/img/logo.png");
}

(5).声明变量键值对
语法:@名称声明：{属性：值}；
使用：@名称();

/*less*/
@background: {background: red};
@Rules: {
	width:200px;
}
body{
	@background();
}
div{
	@Rules();
}
/*css*/

body {
  background: red;
}
div {
  width: 200px;
}

注意:选择器、属性变量使用都要带{}

2.混合
(1).无参数:
声明 .card{}
使用 .card() =

/*less*/
.card{
	width: 100px;
	height: 100px;
	background-color: red;
}
#wrap{
	.card();
}
/*css*/
.card {
  width: 100px;
  height: 100px;
  background-color: red;
}
#wrap {
  width: 100px;
  height: 100px;
  background-color: red;
}

2.默认参数方法

• Less可以使用默认参数，如果 没有参数，使用默认参数
• 传参数 必须带单位
• @arguments犹如JS中的arguments代指 全部参数

/*less*/
.border(@a:10px,@b:50px,@c:30px,@color:#000){
	border: solid 1px @color;
	box-shadow: @arguments;
}
#main{
	.border(0px,5px,30px,red);//必须带单位
}
#wrap{
	.border(0px);
}
/*css*/
#main {
  border: solid 1px red;
  box-shadow: 0px 5px 30px red;
}
#wrap {
  border: solid 1px #000;
  box-shadow: 0px 50px 30px #000;
}

3.嵌套

&: 代表上一层选择器的名字

/*less*/
#header{
	&:after{
		content: "Less is more";
	}
	.title{
		content: "This is title";
	}
	&_content{
		margin:0 auto;
	}
}
/*css*/
#header:after {
  content: "Less is more";
}
#header .title {//嵌套
  content: "This is title";
}
#header_content {//无嵌套
  margin: 0 auto;
}

4.运算

• 加减时 以第一个数据的单位未基准
• 乘除时 注意单位的统一

/*less*/
@width: 100px;
@color: #222;
div{
	width: @width+10;
	margin-left: @width+100;
	color:@color*2;
}
/*css*/.
div {
  width: 110px;
  margin-left: 200px;
  color: #444444;
}

5.函数

 less提前写好的一些函数 可以直接拿来使用
 
/*less*/
.card{
	width: 100px;
	height: 100px;
	background-color: red;
}
#wrap{
	.card();/直接调用上面写好的card函数/
}
/*css*/
.card {
  width: 100px;
  height: 100px;
  background-color: red;
}
#wrap {
  width: 100px;
  height: 100px;
  background-color: red;
}

6.作用域
就近原则

/*less*/
@var: @a;
@a: 100%;
#wrap{
	width: @var;/使用的是下面的@a,而不是上面的/
	@a: 9%;
}
#wrap2{
	width: @var;
	@a: 100%;
}
/*css*/
#wrap {
  width: 9%;
}
#wrap2{
  width: 100%;
}

7.注释

/**/会被编译到css
// 双斜杠开头为单行注释

8.导入

@import "less1"; 
less可以省略后缀
可以放在任何位置