前言
Less（或写作LESS）是一种由Alexis Sellier设计的动态层叠样式表语言，受Sass所影响，同时也影响了Sass的新语法：SCSS。（维基百科）
通过浏览器编译Less
1
2
3
4
5
6
7
8
9
10
11
| <html>
<head>
<title></title>
<style type="text/less">
...
</style>
</head>
<body>
<script src="less.min.js"></script>
</body>
</html>
|
注释
变量
选择器变量
1
2
3
4
5
| @变量名: #id;
@{id} {
...
}
|
1
2
3
4
5
| @变量名: id;
#@{id} {
...
}
|
属性变量
1
2
3
4
5
| @变量名: 变量值;
#app {
color: @变量名;
}
|
URL变量
1
2
3
4
5
| @变量名: "../images/";
#app {
background: url("@变量名/01.png");
}
|
声名变量
1
2
3
4
5
| @变量名: {background: #FFF;};
#app {
@变量名();
}
|
变量运算
- 为了防止运算符被当作变量名，在运算符左右要用空格隔开
1
2
3
4
5
| @width: 300px;
#app {
width: (@width - 10) * 2;
}
|
变量定义变量
CSS嵌套
1
2
3
4
5
6
7
8
9
10
| #div1 {
...
& #div2 {
...
}
}
|
简写
1
2
3
4
5
6
7
8
9
10
| #div1 {
...
#div2 {
...
}
}
|
媒体查询
1
2
3
4
5
6
7
8
9
10
| #app {
@media screen {
@media (max-width:768px) {
background: #FFF;
}
}
@media tv {
background: #FFF;
}
}
|
混合方法
无参数方法
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.方法名() {
background: #FFF;
}
#方法名() {
background: #FFF;
}
#app {
.方法名();
#方法名();
}
|
默认参数方法
1
2
3
4
5
6
7
| .方法名(@变量名: #FFF) {
background: @变量名
}
#app {
.方法名();
}
|
引入全部参数
1
2
3
| .方法名(@变量名: 1px, @变量名: 1px, @变量名: 1px, @变量名: #FFF) {
box-shadow: @arguments;
}
|
方法的匹配模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .方法名(top, @width: 1px, @color: FFF) {
border-color: transparent transparent @color transparent;
}
.方法名(right, @width: 1px, @color: FFF) {
border-color: transparent @color transparent transparent;
}
.方法名(bottom, @width: 1px, @color: FFF) {
border-color: @color transparent transparent transparent;
}
.方法名(left, @width: 1px, @color: FFF) {
border-color: transparent transparent transparent @color;
}
.方法名(@_, @width: 1px, @color: FFF) {
border-color: transparent transparent transparent transparent;
}
#app {
.方法名(left, 1px, #FFF);
}
|
方法的命名空间
1
2
3
4
5
6
7
8
9
| #方法名1() {
.方法名2() {
background: #FFF;
}
}
#app {
#方法名1() > .方法名2();
}
|
方法的条件筛选
与
1
2
3
4
5
6
7
| .方法名(@width) when (@width > 100) and (@width < 200) {
...
}
#app {
.方法名();
}
|
或
1
2
3
4
5
6
7
| .方法名(@width) when (@width > 100) , (@width < 200) {
...
}
#app {
.方法名();
}
|
非
1
2
3
4
5
6
7
| .方法名(@width) when not (@width > 100) {
...
}
#app {
.方法名();
}
|
通过递归模拟循环方法
1
2
3
4
5
6
7
| .方法名(循环次数);
.方法名(@num, @i: 0) when (@i < @num) {
...
.方法名(@num, (@i + 1))
}
|
不定长参数方法
1
2
3
4
5
6
7
| .方法名(...) {
box-shadow: @arguments;
}
#app {
.方法名(1px, 1px, 1px, #FFF);
}
|
指定最高优先级
1
2
3
4
5
6
7
| .方法名() {
...
}
#app {
.方法名() !important;
}
|
属性拼接方法
通过逗号作为分隔符
1
2
3
4
5
6
7
8
| .方法名() {
属性名+: 属性值;
}
#app() {
.方法名();
属性名+: 属性值;
}
|
1
2
3
| #app {
属性名: 属性值, 属性值;
}
|
通过空格作为分隔符
1
2
3
4
5
6
7
8
| .方法名() {
属性名+_: 属性值;
}
#app() {
.方法名();
属性名+_: 属性值;
}
|
继承
直接调用
1
2
3
4
5
6
7
| #main {
...
}
#app {
#main;
}
|
通过extend关键字实现继承
1
2
3
4
5
6
7
| #main {
...
}
#app {
&:extend(#main)
}
|
继承多级
1
2
3
4
5
6
7
8
9
| #father {
#son {
...
}
}
#app {
&:extend(#father #son)
}
|
通过全局搜索替换实现继承
1
2
3
4
5
6
7
| #main {
...
}
#app:extend(#main all) {
...
}
|
导入
<filename>：另一个less文件的文件名，指定后缀名或者不指定后缀名都可以
导入但是不立即编译
1
| @import (reference) "<filename>";
|
导入时重复代码不再解析
1
| @import (once) "<filename>";
|
允许导入多个同名的文件
1
2
| @import (multiple) "<filename>";
@import (multiple) "<filename>";
|
待条件的混合方法
1
2
3
4
5
6
7
| .方法名(@width) when (@width > 100) {
...
}
#app {
.方法名();
}
|
常见表达式
亮度检测
1
2
3
| .方法名(@num) when (ligntness(@num) <= 50%) {
...
}
|
类型检测
检测是否是颜色
1
2
3
| .方法名(@a) when (iscolor(@a)) {
...
}
|
检测是否是数值
1
2
3
| .方法名(@a) when (isnumber(@a)) {
...
}
|
检测是否是字符串
1
2
3
| .方法名(@a) when (isstring(@a)) {
...
}
|
检测是否是关键字
1
2
3
| .方法名(@a) when (iskeyword(@a)) {
...
}
|
检测是否是链接
1
2
3
| .方法名(@a) when (isurl(@a)) {
...
}
|
单位检测
检测是否是像素
1
2
3
| .方法名(@a) when (ispixel(@a)) {
...
}
|
检测是否是百分比
1
2
3
| .方法名(@a) when (ispercentage(@a)) {
...
}
|
检测是否是em
1
2
3
| .方法名(@a) when (isem(@a)) {
...
}
|
检测是否是指定的单位
<unit>：指定单位
px、rem、em、pt、mm、"%"
1
2
3
| .方法名(@a) when (isunit(@a, <unit>)) {
...
}
|
内置函数库
转换颜色值
1
2
| color("#FFF");
color("red");
|
单位转换
长度单位
m、cm、mm、in、pt、px、pc
时间单位
s、ms
角度单位
rad（弧度）、deg（度）、grad（梯度）、tum（圆）
完成
参考文献
哔哩哔哩——码歌
Less中文网