Less 的一些高级用法

CSS 评论

最近发现很多同学在使用 Less 的时候， 仅是为了使用 Less 的 变量、嵌套 以及 module 功能。

虽然 Less 相对于 Sass 来说，移除了很多功能，比如 @if @else @while @for @function等，但是并非是Less 不行，Less 的宗旨是 “Do Less Get More”。

我们可以在简洁的API 支撑下，做到更多的事情。

曾经我是个 Scss 党，现在已经全面转 Less 了。

导入导出

提到导入导出，大家可能都在想，一个 @import 就搞定的事情，这也拿来讲？

在Less 初期，确实都是 @import 导入文件一把梭，但是这同样也会带来代码冗余的问题，比如生成重复代码等。

Less v1.4 版本后，编译器新增了 import 参数的支持，如

静默导入

在导入的文件前，添加下划线前缀即可静默引入，即不生成实体代码，仅作为变量使用。

1
2
// color filename：color.less
@import '_color'

refrence

1
@import (refrence) 'color'

refrence 可以配合 extend/mixins 关键字使用，如

1
2
3
4
5
6
7
8
9
10
11
12
// color.less
.a {
  ...
}

.b {
  ...
}

// gap.less
@import (refrence) 'color';
.a:extend(.a all)

这样就只继承 color.less 的 .a ，同时在编译后的文件中，不会生成 .b 的 less 代码。

inline

如果某些css 不想被编译，且还需要引入的话，可以使用这个参数

1
@import (inline) 'color.css'

这样在编译项目的时候， color.css 不会经由 Less 编译器编译，这个设计的目的是防止某些编译器不支持的高级css 属性导致编译报错。

其他的参数还有：

  • once(默认)
  • multiple
  • less
  • css

有兴趣的可以自行查阅文档。

变量

普通的变量定义和引用，每种语言都一样，大家神会即可，说点 Less 不一样的。

属性变量

将变量作为 key 来使用，使用 @{} 来插值

1
2
3
4
5
6
7
8
9
10
11
12
@color: red;

.@{color} {
  color: @color;
  font-size: 100px;
}

// 编译结果
.red {
  color: red;
  font-size: 100px;
}

变量拼接

变量作为 value 使用的时候，需要用~和引号来进行插值计算，如果不加 ~ ，则会生成字符串类型的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.a (@p, @u) {
  font-size: ~"@{p}px";
  background: url("@{u}");
}

.b {
  .a(10, 'https://xxx.com/a.jpg');
}


// 编译结果
.b {
  font-size: 10px;
  background: url("https://xxx.com/a.jpg");
}

路径变量

在导入文件时，同样可以使用变量，来达到按需导入的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 两个主题文件
// theme/dark.less
@color: red;

// theme/light.less
@color: blue;

// file
@theme: "dark";

@import "theme/@{theme}.less";

.a {
  color: @color;
}

// 编译结果
.a {
  color: red;
}

变量引用

同属性变量，既然变量可以作为 style 的属性，那也能作为变量的引用来用，从而就可以实现 PHP 中 $$$$a 这样的套娃用法

看我套娃~

1
2
3
4
5
6
7
8
9
10
11
@a: 'i am origin a';
@b: 'a';

a {
  content: @@b;
}

// 编译结果
a {
  content: 'i am origin a';
}

变量提升

同 JavaScript，Less 中的变量， 也是会提升的

1
2
3
4
5
a {
  color: @a;
}

@a: red;

混入

基础用法

混入 (Mixins) 可以说是 Sass 和 Less 中一个比较常见的功能，在 Less 中基础用法比较简单:

1
2
3
4
5
6
7
8
9
10
11
12
.a {
  color: red;
}

.b {
  .a;
}

// 编译结果
.b {
  color: red;
}

less: 人家都说我清纯不做作， 不像外面那个 sass。

Sass 中将这个功能细分为 @mixin 、@include、@extend、@content，有兴趣的可以去研究一下。

毕竟大多数项目是不需要优化到如此地步的，即便需要优化， 也可以通过嵌套规则来优化。

函数混入

Mixins 可以作为函数使用，从而实现类似 @functions 的功能

1
2
3
4
5
6
7
8
9
10
11
12
13
.a(@color: red) {
	color: @color;
}

.b {
 .a(blue); 
}

// 编译结果
.b {
  color: #0000ff;
}

如果作为函数使用，则自身不会被编译到css 文件中。

高级函数混入

Less 实现了一些高级语言才有的函数特性，如 JavaScript 中的 arguments、解构参数； Python 中的 **kwargs；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.a (...) {
  border: @arguments;
}

.a1 (@px: 1px, @reset...) {
  border: @px @reset;
}

.b {
  .a(1px, solid, red);
  .a1(2px, solid, red);
}

// 编译结果
.b {
  border: 1px solid #ff0000;
  border: 2px solid #ff0000;
}
  • @arguments 可接收到所有的参数集
  • @rest 可接收到 … 定义的参数集

高级函数重载

这里其实和强类型语言中的重载不太一样，不过为了方便理解，可以认为就是模拟重载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.a (@p1, @p2) {
  color: red;
}

.a (@p1) {
   color: blue;
}

.b {
  .a(p1);
  .a(p1, p2);
}

// 编译结果
.b {
  color: blue;
  color: red;
}

可以看到如同函数重载一般，当签名不同的时候，返回不同的结果。

混入作用域

默认的 Mixins 是可以继承调用方上下文的，即可以使用 & 来继承父级，针对比较复杂的场景，Less 提供了 #(命名空间) 加上 > 来控制作用域。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#first {
  .a() {
    color: red;
  }
}
 
#sec {
	.a() {
    color: green;
	}
}
 
 
.b {
   #first > .a;
   #sec > .a; 
}

通过上面的例子可以看到， 我们可以通过命名空间 + > 来控制使用哪个同名混入。

关于 # 命名空间，后面有讲。

函数返回值

Less 并没有 Sass 中的 @return 关键字，但是因为作用域的共享，可以通过变量来实现 @return 的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
.a() {
    @color: red;
 }

.b {
  .a();
  color: @color;
}

// 编译结果
.b {
  color: #ff0000;
}

可以看到，@color 变量在经过 .b 的调用后，已经可以在 .b 作用域内使用。

Mixin 条件

虽然 Less 没有提供 @if @else 等流程控制符，但是提供了 when 关键字， 配合 mixin 重载，灵活使用可以实现类似流程控制的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.a (@p) when (@p < 10) {
  border: ~'@{p}px' solid red;
}

// 如果是or，则用 逗号分割即可
.a (@p) when (@p > 10) and (@p < 15) {
  border: ~'@{p}px' solid blue;
}

.a (@p) when not (@p < 15) {
  border: ~'@{p}px' solid green;
}

.a (@p) when (default()) {
  // 这里是类似 else 的语法
  // 当然在这一串控制中不会生效， 因为上面三个已经可以涵盖所有情况
}

.b {
  .a(9);
  .a(11);
  .a(20);
}

// 编译结果
.b {
  border: 9px solid #ff0000;
  border: 11px solid #0000ff;
  border: 20px solid #008000;
}

Mixin 合并(v1.7.0 支持)

Less 支持 Mixin 的合并选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.a {
  box-shadow+: inset 0 0 10px red;
  border+_: 1px;
}

.b {
  .a();
  box-shadow+: 0 0 10px green;
  border+_: solid red;
}

// 编译结果
.b {
  box-shadow+: inset 0 0 10px red, 0 0 10px green;
  border: 1px solid red;
}

为避免任何非有意的添加，merge需要在每个待加入的声明中显示的设置一个+或者+_标记。 (引自官方文档：https://www.html.cn/doc/less/features/#merge-feature-comma-)

循环

递归循环

Less 可以通过 when 和 递归 mixin 来实现 Sass 中 @while 循环的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.a (@i: 1) when (@i < 11){
  .mr-@{i} {
    margin-right: ~'@{i}px';
  }

  .a (@i + 1);
}

.a()

// 编译结果
.mr-1 {
  margin-right: 1px;
}
.mr-2 {
  margin-right: 2px;
}
...
.mr-10 {
  margin-right: 10px;
}

列表循环

Less 中通过变量可以定义一个列表，如：

1
@strings: left, right, top, bottom;

此时可以通过 each 函数来循环这个列表（each 方法文档中没有，我也忘记咋知道这个方法的了~ - -~）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
each(@strings, .(@type) {
  .@{type} {
    margin-@{type}: 10px;
  }
})

// 编译结果
.left {
  margin-left: 10px;
}
.right {
  margin-right: 10px;
}
.top {
  margin-top: 10px;
}
.bottom {
  margin-bottom: 10px;
}

嚯！到这里终于来点有用的场景了，这个写法很 JavaScript 。

函数

上面讲过我们用 Mixin 去模拟自定义函数，Less 自身也提供了很多常见的操作函数。

颜色函数

通过这些函数可以进行色彩计算、转换。

  • hsl() / hsla()

    通过色相 (hue)，饱和度 (saturation)，亮度 (lightness)，alpha 四种值 (HSLA) 创建不透明的颜色对象。

  • Hsv() / hsva()

    通过色相 (hue)，饱和度 (saturation)，色调 (value)，以及 alpha 四种值 (HSVA) 创建透明的颜色对象。

  • hue

  • saturation

  • lightness

  • red

  • green

  • blue

  • alpha

  • lighten

  • darken

  • fadein

  • fadeout

  • mix

    混色，将两个颜色混成一个。

等等

类型函数

在混入的时候，可以通过类型函数来判断输出结果

  • isnumber
  • isstring
  • iscolor
  • isurl
  • Isunit 是否为单位(px/em/rem)
  • ispercentage
  • ispixel
  • isem

等等

数学函数

写动画效果、图形计算的时候非常有用，不列举了。常见的JavaScript Math 对象方法都在里面。

工具函数

某些场景贼好用

  • data-uri

    将一个资源转为 base64 格式

    data-uri(‘../data/image.jpg’);

    输出：url(‘data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==’);

  • util

    添加或移除一个单位，在配合变量使用的时候效果极佳

    Util(5, px)

    输出 5px

等等

JavaScript in Less

Less 支持一个很神奇的特性，可能跟底层是 JavaScript 实现有关。

它支持我们在 Less 中编写 JavaScript，仅限 ES5，不过即便如此， 还是可以通过这个特性来大大扩展 Less 的灵活性。

从这刻起，Less 就是一门完整的编程语言了。

ant design 中就是使用这种方法来计算 Button 色阶

开启编译支持

javascript in less 需要 less loader 额外开启，默认是关闭的~

1
2
3
4
5
6
7
8
9
10
// webpack
// 这里是通过 vue 的 config 覆写语法来做的，道理都一样，目的就是开启 lessLoader 中 lessOptions 里的 JavaScriptEnabled

config.module.rule('less').oneOf(module).use('less-loader').loader('less-loader')
  .tap(options => {
  options.lessOptions = {
    javascriptEnabled : true
  }
  return options
})

JavaScript 编写

1
2
3
4
5
6
7
8
9
10
11
.funtionFactory {
  // 因为不支持 es6，所以只能写 function
  @functions: ~`(function () {
    var color = 'red'
    
		// 将供less 使用的函数挂在原型链上，我猜less loader 内部会 new 外层这个匿名函数~
    this.getColor = function () {
    	return color
    }
  }
}

Less 中调用 JavaScript 方法

1
2
3
4
5
6
7
8
9
10
11
// 先调用工厂函数，生成作用域内的方法
.funtionFactory();

.a {
  color: ~`getColor()`;
}

// 编译结果
.a {
  color: red;
}

注意：

less 中调用 JavaScript 方法的时候，是可以传递参数的。

所以我们平常也可以把 Less 中一些复杂的计算转移到 JavaScript 中去。

业务场景

需求

在日常开发中，搭建底层样式库的时候，为了方便 UI 绘制，我决定要创建一些辅助间距class，类似 Material UI 中的 pl、ml。

但是 Material 显然是通过 React 来计算的，那我们使用 Less 要怎么做呢？

结合一下上面的各种用法，很轻松就得出了答案：变量、循环、JavaScript。

来看一下如何实现~

实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 定义使用到的边距
// 如 pb10: padding-bottom: 10

// 定义变量转换函数
.functionFactory() {
  @functions: ~`(function () {

    var map = {
      m: 'margin',
      p: 'padding',
      t: '-top',
      r: '-right',
      b: '-bottom',
      l: '-left',
    }

    this.getFullAttr = function (str) {
      if (str.length === 1) {
        return map[str]
      }

      var newStr = str.replace(/([a-z])([a-z])/g, function ($0, $1, $2) {
        return map[$1] + map[$2]
      })
      return newStr
    }
  })()`
}

.functionFactory();


// 定义循环构造体
.eachFactory(@list) {
  each(@list, .(@value) {
    each(@types, .(@type) {
      @fullType: ~`getFullAttr("@{type}")`;

      .@{type}@{value} {
          @{fullType}: ~"@{value}px !important";
      }
    })
  })
}


// 定义的边距类型
@types: pt, pr, pb, pl, mt, mr, mb, ml, p, m;

// 10 以下者皆定义,
@baseGapList: range(0, 10, 1);

// 除此之外，余则加之
@expandGapList: 12, 16, 20, 24, 30, 32, 38, 40, 46, 50, 80, 100;

.eachFactory(@baseGapList);
.eachFactory(@expandGapList);

这段代码编译后，就会生成四个边的边距 style，如直接在项目中使用 pl8、pr16、mb24 即可。