Less运算和函数

Posted Web先生的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Less运算和函数相关的知识,希望对你有一定的参考价值。

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;

以上是关于Less运算和函数的主要内容,如果未能解决你的问题,请参考以下文章

10个JavaScript代码片段,使你更加容易前端开发。

10个JavaScript代码片段,使你更加容易前端开发。

Less

leetcode_1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold_[二维前缀和](代码片段

less

初识less sass