## 1 Less 的使用
1.1 使用 less.js 编译 less
`html
`
1.2 使用 vscode 插件自动编译 less
`
vscode 安装扩展 "Easy Less"
创建扩展名是 .less 的文件，在文件中写 less 代码； Easy Less 会自动编译成同名的CSS； 每次保存都会自动编译。
html 中使用 link 引入 css 文件
`
2 Less 语法
2.1 Less 的注释
`less
/ 这是 CSS 注释,会原样编译到 CSS 中 /
// 这是 LESS 注释，不会编译到 CSS 中
`
2.2 Less 的变量
① 定义变量
定义变量的一般形式：
`less
@变量名:值;
@len: 600px;
@master-red: #900;
@master-green: #080;
@sencond-red: #600;
`
如果变量的值有特殊符号：
`less
@变量名:~"值";
@min768: ~"min-width:768px";
@min992: ~"min-width:992px";
@sel02: ~".news li";
`
② 使用变量
将变量作为属性值使用（大部分应用场景）：
`less
// 直接使用 @变量名
width: @len;
color: @master-green;
background: @master-red;
border: 1px solid @master-green;
@media (@min768) {
.container {
width: 100%;
}
}
`
将变量作为属性名或者选择器使用：
`less
// @{变量名}
.box {
// 变量作为属性名
@{prop}: 10px 10px;
}
// 变量名作为选择器
@{sel01} {
width: @len; height: (@len/2);
}
`
2.3 Less 混合 (mixins)
① 混合
定义混合：
`less
.center-box01() {
position: absolute; width: 400px; height: 300px; left: 50%; top: 50%; margin-left: -200px; margin-top: -150px;
}
`
使用混合：
`less
.item {
// 调用混合 .center-box01();
}
.news li {
// 调用混合 .center-box01(); // 其他样式 background: #900; border: 1px solid #999;
}
`
② 带参数的混合
定义带参数的混合：
`less
// 定义混合 有参数
.center-box02(@width, @height) {
position: absolute; width: @width; height: @height; left: 50%; top: 50%; margin-left: -(@width/2); margin-top: -(@height/2);
}
`
使用有参数的混合：
`js
// 调用有参数的混合 按照顺序传参数
.center-box02(600px,500px);
// 调用有参数的混合 按照名字传参
.center-box02(@height:600px, @width:700px);
`
③ 参数有默认值的混合
`less
// 定义混合 参数设置默认值
// 有默认值的参数在后面
// 可以按照顺序传参，也可以按照名字传参
.center-box03(@width, @height：800px) {
position: absolute; width: @width; height: @height; left: 50%; top: 50%; margin-left: -(@width/2); margin-top: -(@height/2);
}
// 有默认值的参数在前面后面都可以
// 只能按照名字传参
.center-box04(@width：1200px, @height) {
position: absolute; width: @width; height: @height; left: 50%; top: 50%; margin-left: -(@width/2); margin-top: -(@height/2);
}
`
④ @arguments
`js
// @arguments 获取参数列表
.box-shadow(@x, @y, @b, @o, @color) {
-webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; -o-box-shadow: @arguments; box-shadow: @arguments;
}
.box {
width: 400px; height: 300px; background: #900; .box-shadow(3px, 10px, 15px, 0px, #ccc);
}
`
2.4 Less 条件判断
`less
.triangle(@border-width, @color, @direction) when (@direction=up) {
width: 0; height: 0; border-style: solid; border-width: @border-width; border-color: transparent transparent @color transparent;
}
.triangle(@border-width, @color, @direction) when (@direction=down) {
width: 0; height: 0; border-style: solid; border-width: @border-width; border-color: @color transparent transparent transparent;
}
.triangle(@border-width, @color, @direction) when (@direction=left) {
width: 0; height: 0; border-style: solid; border-width: @border-width; border-color: transparent @color transparent transparent;
}
.triangle(@border-width, @color, @direction) when (@direction=right) {
width: 0; height: 0; border-style: solid; border-width: @border-width; border-color: transparent transparent transparent @color;
}
`
2.5 Less 导入
导入 less 文件：
`js
// 将 文件名.less 中的内容编译到 css 中
@import "文件名.less";
// 可以省略扩展名
@import "文件名"
`
导入 css 文件:
`less
// 原样编译到 css 中
@import "文件名.css";
`
2.6 Less 嵌套
① 基本使用(层级选择器)
`less
.news {
li {}
>li {}
+li {}
~li {}
}
`
编译为：
`css
.news {}
.news li {}
.news > li {}
.news + li {}
.news ~ li {}
`
② & 符号应用（交集选择器组合）
`less
.item {
&:hover {}
&.active {}
}
`
编译为：
`css
.item {}
.item:hover {}
.item.active {}
`
③ 媒体查询的嵌套
`less
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
@media (min-width:768px) {
width: 750px;
}
@media (min-width: 992px) {
width: 970px;
}
@media (min-width: 1200px) {
width: 1170px;
}
}
`
编译为：
`css
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
`
④ 混合和嵌套结合
`less
.clearfix() {
&::after {
content: "";
display: block;
clear:both;
}
}
`
2.7 Less 运算符
`
Less 可以进行 +、-、*、/ 运算
除运算需要使用小括号
-
如果两个操作数单位不一致，结果使用第一个操作数的单位
如果只有一个操作数有单位，结果就使用该单位
`
2.9 Less 函数
`
percentage() 计算百分比
mod() 取余运算
lighten() 颜色调高亮度
darken() 颜色调低亮度
`
https://less.bootcss.com/functions/
