系列文章目录
一、继承
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 入门到此结束，这些已经可以应对基本的开发。
如果你想学习更多内容，那么推荐去 Less 官网进行深入学习。文章来源：https://www.toymoban.com/news/detail-830942.html
这里是 前端杂货铺，期待您的 三连 + 关注文章来源地址https://www.toymoban.com/news/detail-830942.html
到了这里，关于Less预处理——继承、导入、条件表达式和函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
