Less简明教程
2.4.1 运算
阅读(

Less 基础

Less 特性

变量

Mixin

嵌套规则

运算和函数

运算

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

@init: #111111;
@transition: @init*2;
.switchColor {
    color: @transition;
 }

编译后的CSS代码为:

.switchColor {
   color: #222222;
 }

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

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

@var: 1px + 5;

同样,也允许使用括号:

width: (@var + 5) * 2;

并且,还可以在复合属性中进行运算:

border: (@width * 2) solid black;

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验