Less - 运算

LESS - 运算 (Operations)

描述

LESS 允许你在样式表 (stylesheets) 中直接执行算术运算 (arithmetic operations)。此功能对于创建动态和可维护的样式非常强大。运算可以应用于数字、尺寸/度量值 (dimensions)（带有 px、em、% 等单位 (units) 的值）和颜色。

支持的算术运算包括：

加法 (+)
减法 (-)
乘法 (*)
除法 (/)

单位处理 (Unit Handling): LESS 在运算过程中会尝试智能地处理单位。例如，10px * 2 的结果是 20px。如果你混合使用单位，LESS 通常会使用左侧操作数的单位，或者在可能的情况下尝试转换（例如，2in + 5cm）。然而，为了清晰度和可预测性，最好对兼容单位进行运算，或确保进行显式转换 (explicit conversions)。

颜色运算 (Color Operations): 运算也可以应用于颜色值 (color values)。例如，将 #111 添加到 #222 的结果将是 #333333。每个颜色通道 (color channel)（红、绿、蓝）都独立进行运算。

圆括号 (Parentheses) 和优先级 (Precedence): 标准的数学运算符优先级 (operator precedence) 适用（乘法/除法优先于加法/减法）。使用圆括号 () 可以显式控制运算顺序，或者确保执行除法计算，特别是在启用 strictMath 选项 (option) 时，或为了通用清晰度。例如，对于除法，(@variable / 2) 比 @variable / 2 更安全。

示例

以下示例演示了 LESS 中的各种运算。

HTML 文件 (operations_example.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LESS Operations Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <header class="site-header">Header</header>
        <article class="main-content">Main Content</article>
        <aside class="sidebar">Sidebar</aside>
    </div>
    <div class="box">A box with calculated padding.</div>
</body>
</html>

LESS 文件 (style.less):

@base-font-size: 16px;
@base-padding: 10px;
@site-width: 960px;
@sidebar-width: (@site-width / 3);
@primary-color: #3498db; // 一个漂亮的蓝色

.container {
  width: @site-width;
  margin: 0 auto;
}

.site-header {
  background-color: @primary-color;
  color: white;
  padding: @base-padding * 1.5; // 10px * 1.5 = 15px
  font-size: @base-font-size + 4px; // 16px + 4px = 20px
}

.main-content {
  width: @site-width - @sidebar-width - (2 * @base-padding); // 960px - 320px - 20px = 620px
  float: left;
  padding: @base-padding;
  background-color: lighten(@primary-color, 40%); // 主色调的浅色版本
}

.sidebar {
  width: @sidebar-width - (2 * @base-padding); // 320px - 20px = 300px
  float: right;
  padding: @base-padding;
  background-color: @primary-color - #111111; // 稍微加深颜色
}

.box {
  // 使用圆括号进行除法运算是个好习惯
  padding: (@base-padding / 2) (@base-padding * 2);
  margin-top: @base-font-size;
  border: 1px solid (#000000 + #333333); // 结果是 #333333
}

将 style.less 编译到 style.css:

lessc style.less style.css

编译后的 CSS 文件 (style.css):

.container {
  width: 960px;
  margin: 0 auto;
}
.site-header {
  background-color: #3498db;
  color: white;
  padding: 15px;
  font-size: 20px;
}
.main-content {
  width: 620px;
  float: left;
  padding: 10px;
  background-color: #a9d7f4;
}
.sidebar {
  width: 300px;
  float: right;
  padding: 10px;
  background-color: #2387ca;
}
.box {
  padding: 5px 20px;
  margin-top: 16px;
  border: 1px solid #333333;
}

输出

保存 HTML 和 LESS 文件，并将 LESS 编译为 CSS 后：

在浏览器中打开 operations_example.html。
你将观察到布局 (layout) 和样式 (styles) 已根据 LESS 执行的计算 (calculations) 应用。例如，header 的 padding 将是 15px，主要内容的 width 将是 620px 等等。

运算是创建可扩展 (scalable) 和可维护的设计系统 (maintainable design systems) 的基础，在这些系统中，尺寸 (dimensions)、间距 (spacing) 甚至颜色变化 (color variations) 都可以从基本值派生 (derived from base values)。(有关运算和数学的更多详细信息，请参阅官方 Less 文档：lesscss.org/features/#operations-feature)