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;