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

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

代码007普通

打赏 收藏 海报 链接