一、Less 变量
1、选择器变量
让选择器变成动态的
index.html 文件
- id 和 class 选择器
<div id="wrap"> Hello Less! </div> <div class="wrap"> Hello World! </div>
index.less 文件
- 第一种是 确定了 选择器的类型（id 选择器）
- 第二种是 不确定 选择器的类型（id/class 选择器）
// 选择器变量 @mySelector: #wrap; @wrap: wrap; @{mySelector} { color: #ccc; width: 50%; } .@{wrap} { color: skyblue; width: 50%; } #@{wrap} { color: aqua; width: 50%; }
index.css 文件
- 自动转义后的 css 文件
#wrap { color: #ccc; width: 50%; } .wrap { color: skyblue; width: 50%; } #wrap { color: aqua; width: 50%; }
2、属性变量
减少代码书写量
index.html 文件
备注：这是一个公共的HTML结构，以下测试均使用该结构。
<div id="wrap"> Hello Less! </div>
index.less 文件
- 属性变量，设置属性
// 选择器变量 @mySelector: #wrap; @wrap: wrap; // 属性变量 @borderStyle: border-style; @solid: solid; @{mySelector} { @{borderStyle}: @solid; }
index.css 文件
- 自动转义后的 css 文件
#wrap { border-style: solid; }
3、url 变量
项目结构改变时，修改其变量就可以
index.less 文件
@images: "../../img"; body { background: url("@{images}/xxx.png"); }
index.css 文件
- 自动转义后的 css 文件
body { background: url("../../img/xxx.png"); }
4、声明变量
结构：@name: {属性: 值}
使用：@name()
示例：超出的内容，使用 ... 表示
index.less 文件
@Rules: { width: 60px; height: 30px; border: 1px solid #ccc; /*第一步： 溢出隐藏 */ overflow: hidden; /* 第二步：让文本不会换行， 在同一行继续 */ white-space: nowrap; /* 第三步：用省略号来代表未显示完的文本 */ text-overflow: ellipsis; } #wrap { @Rules(); }
index.css 文件
- 自动转义后的 css 文件
#wrap { width: 60px; height: 30px; border: 1px solid #ccc; /*第一步： 溢出隐藏 */ overflow: hidden; /* 第二步：让文本不会换行， 在同一行继续 */ white-space: nowrap; /* 第三步：用省略号来代表未显示完的文本 */ text-overflow: ellipsis; }
5、变量运算
- 加减法时，以第一个数据的单位为基准
- 乘除法时，注意单位一定要统一
- 注意添加空格
index.less 文件
@width: 300px; @color: #ccc; #wrap { width: @width - 20; height: @width - 20 * 2; margin: (@width - 200) * 2; color: @color*1; background-color: @color + #111; }
index.css 文件
- 自动转义后的 css 文件
#wrap { width: 280px; height: 260px; margin: 200px; color: #cccccc; background-color: #dddddd; }
6、变量的作用域
就近原则
index.less 文件
@var:@a; @a:100%; #wrap { width: @var; @a:9%; border: 1px solid #ccc; }
index.css 文件
- 自动转义后的 css 文件
#wrap { width: 9%; border: 1px solid #ccc; }
7、用变量去定义变量
index.less 文件
@fond:@var; @var:'fond'; #wrap::after { content: @var; }
index.css 文件
- 自动转义后的 css 文件
#wrap::after { content: 'fond'; }
二、Less 嵌套
1、& 的使用
&：代表的上一层选择器的名字
index.html 文件
- 多层级的嵌套
<div class="center"> <ul id="list"> <li></li> <li></li> <li></li> </ul> </div>
index.less 文件
- &：代表的上一层选择器的名字
- 可写可不写
.center { width: 100px; height: 100px; background: red; & #list { width: 50px; height: 50px; background: skyblue; li { width: 20px; height: 20px; background: #ccc; } } }
index.css 文件
- 自动转义后的 css 文件
.center { width: 100px; height: 100px; background: red; } .center #list { width: 50px; height: 50px; background: skyblue; } .center #list li { width: 20px; height: 20px; background: #ccc; }
2、媒体查询
index.less 文件
#main { @media screen { @media (max-width: 768px) { width: 100px; } } @media tv { width: 2000px; } }
index.css 文件
- 自动转义后的 css 文件
@media screen and (max-width: 768px) { #main { width: 100px; } } @media tv { #main { width: 2000px; } }
3、小技巧：添加私有样式
示例：实现样式从隐藏到显示的切换
index.less 文件
#main { &.show { display: block; } } .show { display: none; }
index.css 文件
- 自动转义后的 css 文件
#main.show { display: block; } .show { display: none; }
index.html 文件
- 获取 main 节点，实现样式从隐藏到显示
const main = document.getElementById('main') main.classList.add("show")
