Less运算和函数

Posted 2020-10-15 Web先生的博客

Less运算和函数

 

Less运算

在我们的 CSS 中，充斥着大量数值型的 value，比如 color、padding、margin 等。在某些情况下，这些数值之间是有着一定关系的，那么我们怎样利用 Less来组织这些数值之间的关系呢？请看以下Less代码：

在我们的 CSS 中，充斥着大量数值型的 value，比如 color、padding、margin 等。在某些情况下，这些数值之间是有着一定关系的，那么我们怎样利用 Less来组织这些数值之间的关系呢？请看以下Less代码：

1. @init: #111111;
2. @transition: @init*2;
3. .switchColor {
4.     color: @transition;
5.  }

编译后的CSS代码为：

1. .switchColor {
2.    color: #222222;
3.  }

上面的例子中，使用的是 Less 中的 operation特性。简单的讲，就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算，可以对任何数值型的 value（数字、颜色、变量等）进行运算，来实现它们之间的复杂关系。

毫不夸张地说，Less 的运算已经超出了我们的期望，因为它能自动推断出颜色和数值的单位。比如像下面这样单位运算，将会输出 6px：

1. @var: 1px + 5;

同样，也允许使用括号：

1. width: (@var + 5) * 2;

并且，还可以在复合属性中进行运算：

1. border: (@width * 2) solid black;