css 预处理器，后缀名为 .less。

less 代码无法被浏览器识别，实际开发需要转换成 css，使用 liink 标签引入 css 文件。

插件工具

Easy Less

VS Code 内置插件（less 文件保存自动生成 css 文件）

更改编译后 css 存储路径

• 设置 – 搜索 less -- Easy LESS:compile
• settings.json 中编辑 – “out” : “../css/”

Koala 工具 (了解)

考拉客户端：http://koala-app.com/index-zh.html

在线将 less 文件转为 css 文件。

Less 语法

单行注释不会被编译。

变量

和 javascript 一样，也有局部变量和全局变量。

• 定义在 {} 外面的就是全局变量，可以在任意地方使用。
• 定义在 {} 里面的就是局部变量，只能在 {} 中使用。

// 定义变量：
@变量名: 值;
@width: 200px;// 使用变量：
css属性: @变量名;
width: @width;

插值变量

属性名称或者选择器名称都可以使用变量。

// 语法格式：
@{变量名称};// 实例：
@width: 800px;
@w: width;
// 调用：
@w: @width;

less 运算

支持 + - * / 运算。

@w: 200px;
@h: 200px;.father {width: @w;height: @h;background: #f00;position: absolute;top: 50%;left: 50%;// css3 新特性 存在兼容性问题// transform: translate(-50%， -50%);margin-top: -(@w / 2);margin-left: -(@h / 2);.son {width: 100px;height: 100px;background: #00f;position: absolute;top: 50%;left: 50%;margin-top: -(100px / 2);margin-left: -(100px / 2);}
}

calc 方法

calc() 函数用于动态计算长度值。

@w: 200px;
@h: 200px;.father {width: @w;height: @h;background: #f00;position: absolute;top: 50%;left: 50%;margin-top: calc(-@w / 2);margin-left: calc(-@w / 2);
}

混合

将代码打包到一起，提高复用性，本质就是：CV。

注意：

• 如果混合名称后面没有 {}，预处理时会保留混合的代码。
• 如果混合名称后面加上 {}，预处理时不会保留混合的代码。

定义一个 .center，再通过 .center() 进行调用。

.center {position： absolute;top: 50%;left: 50%;transition: translate(-50%, -50%);
}.father {width: 200px;height: 200px;background: #f00;.center();.son {width:100px;height:100px;background: #00f;.center();}
}

带参数的混合

参数可以有默认值。

@num: 50px;// 1.打包
.radius (@num: 100px) {-webkit-border-radius: @num;-moz-border-radius: @num;-o-border-radius: @num;-ms-border-radius: @num;border-radius: @num;
}// 2.调用
p {.radius(@num);
}

可变参数

类似 js 中的 arguments，可以拿到传递进来的所有形参。

// 语法格式：
@arguments

.animate(@ name, @time, @mode, @delay) {transition: @arguments;
}div {.animate(all, 2s, linear, 3s);
}

展开运算符

如果形参使用了 ...，那么必须写在形参列表最后。

当参数数量不确定 或者 部分参数可传可不传时 使用。

// @name 和 @time 是必传的参数，其他参数可传可不传。
.animate(@name, @time, ...) {transition: @arguments;
}div {.animate(all, 2s, linear, 3s);
}

匹配模式

通过混合的第一个字符串形参，来确定具体要执行哪一个同名混合。

// 上三角
.triangle ('up', @width, @color) {width: 0;height: 0;border-style: solid;border-width: @width;border-color: @color transparent transparent transparent;
}
// 右三角
.triangle (right, @width, @color) {width: 0;height: 0;border-style: solid;border-width: @width;border-color: transparent @color transparent transparent;
}
// 下三角
.triangle ('bottom', @width, @color) {width: 0;height: 0;border-style: solid;border-width: @width;border-color: transparent transparent @color transparent;
}
// 左三角
.triangle ('left', @width, @color) {width: 0;height: 0;border-style: solid;border-width: @width;border-color: transparent transparent transparent @color;
}// 调用，匹配 up
div {.triangle('up', @width: 40px, @color: #f00);
}

通用匹配模式

无论同名的哪一个混合被匹配了，都会先执行通用匹配模式中的代码。

// 抽出通用匹配样式
.triangle (@_, @width, @color) {width: 0;height: 0;border-style: solid;border-width: @width;
}// 上三角
.triangle ('up', @width, @color) {border-color: @color transparent transparent transparent;
}
// 右三角
.triangle (right, @width, @color) {border-color: transparent @color transparent transparent;
}
// 下三角
.triangle ('bottom', @width, @color) {border-color: transparent transparent @color transparent;
}
// 左三角
.triangle ('left', @width, @color) {border-color: transparent transparent transparent @color;
}// 调用，匹配 up
div {.triangle('up', @width: 40px, @color: #f00);
}

less 导入

类似于模块化思想，解决 less 文件依赖，复用问题。

导入后可以直接调用该文件内写好的样式。

导入

独立 Less 文件之间相互引用，可以省略 .less 后缀。

@import "路径";

禁止导入

在 less 文件第一行添加 outL false 。

out: false;

less 内置方法

less 的底层是 javascript 实现的。

字符串替换

// 语法格式：
replce(“原字符串”, “要替换的参数”, “替换后的参数”);replce(“abc”, “a”, “p”);	// pbc

判断类型

颜色操作

div {width: 200px;height: 200px;background: rgb(234, 233, 212);
}div:hover {width: 200px;height: 200px;// 减少饱和度background: desaturate(rgb(234, 233, 212), 20%);
}

层级结构

& 符号表示对父选择器的引用

• 结合伪类使用，如：:before。
• 结合伪元素使用，如：:hover。

.father {.son {& {不生成后代关系，表示当前选择器，方便代码迁移}}
}

.son {&::before {content: '新增内容';}&:hover {color: #f00;}
}

:before 不可以添加 :hover 效果，伪类对不生效。

less 继承

类似于 js 中的继承，方便代码复用，便于代码维护。

// 语法格式：
.类名:expend(父类);

.center {position： absolute;top: 50%;left: 50%;transition: translate(-50%, -50%);
}.father:expend(.center) {width: 200px;height: 200px;background: #f00;.son:expend(.center) {width:100px;height:100px;background: #00f;}
}

less 中的继承 和 less 中混合的区别：

1. 使用时的语法格式不同。

   混合：.类名()

   继承：:expend(父类)

2. 转换后的结果不同（混合是直接可拷贝，继承是并集选择器）

less 条件判断

less 中通过 when 给混合添加限定条件，满足才会执行混合中的代码。

when 中可以使用比较运算符(> < >= <= =)、逻辑运算符 或 函数来进行判断。

• and：并且
• , ：或者

条件中除了可以使用比较运算符，还可以使用内置方法。

// 并且
.size1 (@w, @h) when (@w = 400px) and (@h = 400px) {width: @w;height:@h;
}
// 或者
.size2 (@w, @h) when (@w = 400px), (@h = 400px) {width: @w;height:@h;
}
// 内置方法
.size3 (@w, @c) when (iscolor(@c)) and (@w = 100%) {width: @w;color: @c;
}div {.size1(300px, 400px);	// false.size2(300px, 400px);	// true.size3(#f00, 100%);		// true
}

案例：京东 - 两列布局

.commodity {width: 100%;overflow: hidden;padding: 5px;.item {float: left;width: 50%;box-sizing: border-box;margin-bottom: 8px;}.item:nth-child(odd) {padding-right: 2.5px;}.item:nth-child(even) {padding-left: 2.5px;}
}