Less预处理——继承、导入、条件表达式和函数

系列文章目录

文章目录

一、继承

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 官网进行深入学习。

这里是 前端杂货铺，期待您的 三连 + 关注