一、继承
1、extend 关键字的使用
extend 是 Less 的一个伪类，它可继承所匹配声明中的全部样式
index.less 文件
.animation { transition: all .3s ease-out; .hide { transform: scale(0); } } #main { &:extend(.animation); } #con { &:extend(.animation .hide); }
index.css 文件
- 自动转义后的 css 文件内容如下
.animation, #main { transition: all 0.3s ease-out; } .animation .hide, #con { transform: scale(0); }
2、all 全局搜索替换
使用选择器匹配到的全部声明
index.less 文件
#main { width: 200px; } #main { &:after { content: 'Less is more.' } } #wrap:extend(#main all) { height: 200px; }
index.css 文件
- 自动转义后的 css 文件内容如下
#main, #wrap { width: 200px; } #main:after, #wrap:after { content: 'Less is more.'; } #wrap { height: 200px; }
3、减少代码的重复性
extend 与方法的最大差别，就是 extend 是同个选择器共用同一个声明，而方法是使用自己的声明，这就增加了代码的重复性
index.less 文件
.method { width: 200px; &:after { content: 'Less is more'; } } #main { .method }
index.css 文件
- 自动转义后的 css 文件内容如下
.method { width: 200px; } .method:after { content: 'Less is more'; } #main { width: 200px; } #main:after { content: 'Less is more'; }
二、导入
1、文件导入
nav.less 文件
- 定义要导入的文件的样式
#nav { width: 100%; height: 200px; background: pink; }
index.less 文件
- 把 nav.less 文件导入进来
@import 'nav';
index.css 文件
- 自动转义后的 css 文件内容如下
#nav { width: 100%; height: 200px; background: pink; }
2、reference
Less 中最强大的特性，使用引入的Less文件，但不会编译它
nav.less 文件
- 定义要导入的文件的样式
#nav { width: 100%; height: 200px; background: pink; }
index.less 文件
- 把 nav.less 文件导入进来
@import (reference) 'nav';
index.css 文件
// 不会编译，内容为空
3、once
@import 语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析
nav.less 文件
- 定义要导入的文件的样式
#nav { width: 100%; height: 200px; background: pink; }
index.less 文件
- 把 nav.less 文件导入进来
@import (once) 'nav'; @import (once) 'nav';
index.css 文件
- 自动转义后的 css 文件内容如下
- 导入多次也只有一次生效
#nav { width: 100%; height: 200px; background: pink; }
4、multiple
可以多次导入
nav.less 文件
- 定义要导入的文件的样式
#nav { width: 100%; height: 200px; background: pink; }
index.less 文件
- 把 nav.less 文件导入进来
@import (multiple) 'nav'; @import (multiple) 'nav';
index.css 文件
- 自动转义后的 css 文件内容如下
- 可以被导入多次，生效多次
#nav { width: 100%; height: 200px; background: pink; } #nav { width: 100%; height: 200px; background: pink; }
三、条件表达式
1、带条件的混合
格式：when () {}
index.less 文件
.mixin(@a) when(lightness(@a) >= 50%) { background: black; } .mixin(@a) when(lightness(@a) < 50%) { background: white; } .mixin(@a) { color: @a; } .class1 { .mixin(#ddd); } .class2 { .mixin(#555); }
index.css 文件
- 自动转义后的 css 文件内容如下
.class1 { background: black; color: #ddd; } .class2 { background: white; color: #555; }
2、类型检测函数
检测值的类型
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
index.less 文件
.mixin(@a:#fff; @b:0) when(isNumber(@b)) { color: @a; font-size: @b; } .mixin(@a, @b:black) when (isColor(@b)) { font-size: @a; color: @b; } .class { .mixin(#666) }
index.css 文件
- 自动转义后的 css 文件内容如下
.class { color: #666; font-size: 0; font-size: #666; color: black; }
3、单位检测函数
检测一个值除了数字是否是一个特定的单位
- ispixel：px
- ispercentage：%
- isem：em
- isunit：int
index.less 文件
.mixin(@a) when(ispixel(@a)) { width: @a; } .class { .mixin(960px); }
index.css 文件
- 自动转义后的 css 文件内容如下
.class { width: 960px; }
四、函数
示例：color() 函数，解析颜色，将代表颜色的字符串转换为颜色值
index.less 文件
body { color: color("#f60"); background: color("red"); }
index.css 文件
- 自动转义后的 css 文件内容如下
body { color: #f60; background: #ff0000; }
五、写在最后
Less 入门到此结束，这些已经可以应对基本的开发。
如果你想学习更多内容，那么推荐去 Less 官网进行深入学习。
