less-Mixin 之 @functions 趣谈

Posted 2020-10-19 add+

Less - Mixin

mixin有许多高级用法。里面可以直接执行js函数，计算后返回需要的参数

less在线编辑器：http://less2css.org/

最终效果：

看起来没什么卵用，其实非常不错，阅读 ant-design 样式源码 的时候看到他们使用这样的方式计算出颜色梯度，所以特意测试了一把在 less 中使用 js 方法。

----------------------正文-------------------------x-----------------

上图中，我定义了一个基础颜色

@primary-color: #123456;

并以此颜色进行计算，例如将其色相：hsv 的h值 + 50后的颜色： #291256；

主要有以下两点需要注意

1. less 语法： ~"value"

 ~"value"

它接受一个字符串作为参数，并原样返回内容，不含引号。它可用于输出一些不合法的 CSS 语法，或者是使用 LESS 不能识别的属性。

参数：string - 需要转义的字符串。

返回值： string - 转义后的字符串，不含引号

 

2. Mixin 

Mixin: 作为函数去使用，并且可以赋予参数；

yourMixin() {

　　@functions: ~"value";  // 相当于yourMixin() 函数执行就会声明一个 @functions 的变量名;

};

这里需要特别注意  上面关于 ~"value" 说明中的一句话： 并原样返回内容

这里面就可以直接使用 js 函数进行计算，然后返回计算值

有了以上两点，就可以实现值的计算并返回了

举一个简单的方法：

1. 先定义一个基础变量

@primary-color: #123456;

2. 定义一个用于计算的Mixin函数

.paletteMixin() {
  @functions: ~`(function() {
    this.palette = function() {
     console.log(6666);
    }
  })()`;
}
// 函数定义好以后执行一下Mixin函数，使其内部定义的 @functions 变量名生效，即实例化此方法

.paletteMixin()；

3. 调用 @functions 方法

.test {
	color: ~`palette()`;
}

 

这时应该呈现的结果如下：

4. 现在说明方法已经执行成功，开始传递一个变量试一试

// 修改原来的 console.log(6666); 替换为 return color; 其他保持不变

.paletteMixin() {
  @functions: ~`(function() {
    this.palette = function(color) {
     return color;
    }
  })()`;
}

5. 传递参数

// 在 palette() 中传入基础颜色 @primary-color
.test {
    color: color(~`palette("@{primary-color}")`);
}

 

现在的效果应该是：

 

6. 传递参数并返回结果已经实现了，就代表可以在传递后进行计算并返回结果

一般用于处理颜色等，单纯的色码： #FF0000 值无法进行计算，需要使用

https://github.com/bgrins/TinyColor/blob/master/tinycolor.js

进行解析色码值。ant-design中即是采用这样的方式进行处理的。

 --------------------------------------------------------------------------------------------------------

其他相关:

less 高度计算:

height: calc(~ \'100vh - 64px\');

 

className: 

　　overlayClassName

 

样式修改： 　　

　　div[class="form-item-label"]

　　div[class$="select-selection--single"]