Less语法详解：从零开始，轻松掌握Less

Less 是一种动态样式表语言，它扩展了 CSS 语言，增加了变量、混合（mixins）、函数等特性。Less 可以运行在 Node 或浏览器上，并且可以与各种构建工具无缝集成。本文将对less基础语法进行讲解。

一.安装与编译

安装 Less

在开始使用 Less 之前，需要先安装它。如果使用 Node.js，可以通过 npm 安装 Less。

npm install -g less

编写 Less 代码

Less 代码与 CSS 非常相似，但有一些额外的特性。先看一个简单的 Less 示例：

@primary-color: #333;

body {
  color: @primary-color;
}

#header {
  background-color: @primary-color;
}

编译 Less 代码

可以使用 Less 命令行工具：

lessc style.less style.css

编译 style.less 文件并生成 style.css 文件。

---

二.基本语法

1.变量

Less 允许定义变量，这些变量可以在整个样式表中重用，变量以 @ 符号开头，后面跟着变量名。

@primary-color: #333;

body {
  color: @primary-color;
}

#header {
  background-color: @primary-color;
}

（1）定义变量

@primary-color: #333; // 定义一个颜色变量
@base-font-size: 16px; // 定义一个字体大小变量
@padding: 10px; // 定义一个内边距变量

（2）在样式表中使用变量：

body {
  color: @primary-color; // 使用颜色变量
  font-size: @base-font-size; // 使用字体大小变量
}

#container {
  padding: @padding; // 使用内边距变量
}

（3）变量的作用域：

变量在定义它们的选择器内部有效，并且可以在嵌套的选择器中访问。如果在一个选择器中定义了一个变量，它将在这个选择器及其所有嵌套的选择器中可用。

#header {
  @link-color: #555; // 在 #header 选择器中定义变量
  a {
    color: @link-color; // 在嵌套的选择器中使用变量
  }
}

（4）变量的覆盖：

如果在一个选择器中定义了一个变量，然后在嵌套的选择器中又定义了同名的变量，嵌套选择器中的变量将覆盖外部选择器中的变量。

#header {
  @link-color: #555; // 在 #header 选择器中定义变量
  #logo {
    @link-color: #fff; // 在 #logo 选择器中定义同名的变量
    a {
      color: @link-color; // 使用 #logo 选择器中定义的变量
    }
  }
}

（5）变量的延迟解析：

Less 的变量是延迟解析的，也就是编译器会在编译过程中查找所有变量的定义，并将它们替换到相应的位置。因此，即使我们在使用变量之前定义它，编译后的 CSS 代码仍然是正确的。

// 在这里使用变量，但还没有定义
#header {
  a {
    color: @link-color; // 使用变量
  }
}

// 定义变量
@link-color: #555;

// 变量在编译时被替换

---

2.混合（Mixins）

混合是 Less 中一个非常有用的功能，它允许将一组 CSS 属性重用到一个或多个选择器中。

.border {
  border: 1px solid #ccc;
}

#header {
  .border;
}

#footer {
  .border;
}

（1）定义混合

混合通过 .mixin-name 的形式定义，其中 mixin-name 是混合的名称。混合内部可以包含任何 CSS 规则。

.bordered {
  border: 1px solid #ccc;
}

.rounded {
  border-radius: 5px;
}

（2）使用混合

要使用混合，只需要在需要的地方调用混合的名称，就像调用一个函数一样。

#header {
  .bordered;
}

#footer {
  .bordered;
  .rounded;
}

编译后的 CSS：

#header {
  border: 1px solid #ccc;
}

#footer {
  border: 1px solid #ccc;
  border-radius: 5px;
}

（3）带参数的混合

混合可以接受参数，参数在混合定义时指定，使用 @param 的形式。

.border-radius(@radius: 5px) {
  border-radius: @radius;
}

#header {
  .border-radius();
}

#footer {
  .border-radius(10px);
}

编译后的 CSS：

#header {
  border-radius: 5px;
}

#footer {
  border-radius: 10px;
}

（4）默认参数值

在混合定义中，可以为参数指定默认值。如果调用混合时没有提供参数，将使用默认值。

.border-style(@style: solid) {
  border-style: @style;
}

#header {
  .border-style();
}

#footer {
  .border-style(dashed);
}

编译后的 CSS：

#header {
  border-style: solid;
}

#footer {
  border-style: dashed;
}

（5）命名参数

在调用混合时，可以使用命名参数来指定特定的参数值，而不是按照定义的顺序。

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @x @y @blur @color;
}

#header {
  .box-shadow(0, 2px, 5px);
}

#footer {
  .box-shadow(y: 2px, color: #ccc);
}

编译后的 CSS：

#header {
  box-shadow: 0 2px 5px #000;
}

#footer {
  box-shadow: 0 2px 1px #ccc;
}

（6）混合的嵌套

混合可以嵌套使用，适用于复杂的样式表。

#header {
  .bordered;
  .rounded(10px);
}

#footer {
  .bordered;
  .rounded(5px);
}

编译后的 CSS：

#header {
  border: 1px solid #ccc;
  border-radius: 10px;
}

#footer {
  border: 1px solid #ccc;
  border-radius: 5px;
}

（7）混合的继承

混合还可以继承其他混合的属性。

.border {
  border: 1px solid #ccc;
}

.border-radius(@radius: 5px) {
  .border;
  border-radius: @radius;
}

#header {
  .border-radius();
}

#footer {
  .border-radius(10px);
}

编译后的 CSS：

#header {
  border: 1px solid #ccc;
  border-radius: 5px;
}

#footer {
  border: 1px solid #ccc;
  border-radius: 10px;
}

混合是 Less 中一个非常强大的功能，它可以避免重复代码，使样式表更加简洁和易于维护。

---

3.函数

Less 提供了一些内置函数，可以帮助你进行颜色计算、数学运算等。

@primary-color: #333;

body {
  color: lighten(@primary-color, 10%);
}

#header {
  background-color: darken(@primary-color, 10%);
}

（1）内置函数

Less 提供了许多内置函数，这里给出一些常用的内置函数：

颜色函数

• lighten(color, amount)：使颜色变亮。
• darken(color, amount)：使颜色变暗。
• saturate(color, amount)：增加颜色的饱和度。
• desaturate(color, amount)：减少颜色的饱和度。
• fade(color, amount)：改变颜色的透明度。
• spin(color, amount)：改变颜色的色调。
• hsl(color)：将颜色转换为 HSL 表示。
• hsla(color, alpha)：将颜色转换为 HSLA 表示。
• rgb(color)：将颜色转换为 RGB 表示。
• rgba(color, alpha)：将颜色转换为 RGBA 表示。

@primary-color: #333;

// 使颜色变亮 10%
body {
  color: lighten(@primary-color, 10%);
}

// 使颜色变暗 10%
#header {
  background-color: darken(@primary-color, 10%);
}

// 增加颜色的饱和度 20%
#main-content {
  color: saturate(@primary-color, 20%);
}

// 减少颜色的饱和度 20%
#sidebar {
  color: desaturate(@primary-color, 20%);
}

// 改变颜色的透明度 0.5（50% 透明）
#overlay {
  background-color: rgba(@primary-color, 0.5);
}

数学函数

• ceil(number)：向上取整。
• floor(number)：向下取整。
• round(number)：四舍五入。
• percentage(number)：将数字转换为百分比。
• min(a, b)：返回两个数字中的最小值。
• max(a, b)：返回两个数字中的最大值。

字符串函数

• extract(string, index)：从字符串中提取指定位置的字符。

@str: "Hello, World!";
@first-character: extract(@str, 1);
@last-character: extract(@str, length(@str));

#example {
  first-character: @first-character; // "H"
  last-character: @last-character;   // "!"
}

• length(string)：返回字符串的长度。

@str: "Hello, World!";
@str-length: length(@str);

#example {
  str-length: @str-length; // 13
}

• replace(string, pattern, replacement)：替换字符串中的模式。

@str: "Hello, World!";
@replaced-str: replace(@str, "World", "Less");

#example {
  replaced-str: @replaced-str; // "Hello, Less!"
}

• to-upper-case(string)：将字符串转换为大写。

@str: "hello, world!";
@upper-str: to-upper-case(@str);

#example {
  upper-str: @upper-str; // "HELLO, WORLD!"
}

• to-lower-case(string)：将字符串转换为小写。

@str: "HELLO, WORLD!";
@lower-str: to-lower-case(@str);

#example {
  lower-str: @lower-str; // "hello, world!"
}

（2）自定义函数

除了内置函数，还可以自定义函数。自定义函数允许封装一段代码，并在需要时调用它。

@function my-function($arg1,$arg2) {
  @return $arg1 +$arg2;
}

#header {
  width: my-function(100px, 50px);
}

（3）使用函数

在 Less 中使用函数非常简单，只需调用函数并传入相应的参数即可。

@primary-color: #333;

body {
  color: lighten(@primary-color, 10%);
}

#header {
  background-color: darken(@primary-color, 10%);
}

---

4.嵌套

Less 允许嵌套编写 CSS 规则，让代码更加简洁和易于维护。

<div id="header">
  <div id="logo">
    <!-- Logo content here -->
  </div>
  <div id="navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

// 定义一个混合（mixin）
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// 定义一个混合（mixin）
.box-shadow(@x, @y, @blur, @color) {
  -webkit-box-shadow: @x @y @blur @color;
  -moz-box-shadow: @x @y @blur @color;
  box-shadow: @x @y @blur @color;
}

// 使用混合（mixin）并嵌套规则
#header {
  .border-radius(10px); // 应用混合（mixin）
  .box-shadow(0, 2px, 5px, rgba(0, 0, 0, 0.2)); // 应用混合（mixin）

  #logo {
    width: 300px;
    height: 100px;
    // 嵌套规则
    &:hover {
      .border-radius(15px); // 应用混合（mixin）
      .box-shadow(0, 5px, 10px, rgba(0, 0, 0, 0.3)); // 应用混合（mixin）
    }
  }

  #navigation {
    ul {
      list-style-type: none;
      li {
        display: inline;
        a {
          text-decoration: none;
          color: #333;
          // 嵌套规则
          &:hover {
            color: #111;
          }
        }
      }
    }
  }
}

---

5.运算

Less 允许在样式表中进行数学运算，支持加法（+）、减法（-）、乘法（*）、除法（/）和取模（%）等基本数学运算。这些运算可以在变量、混合（mixin）、函数和属性值中使用。

（1）变量运算

@base-font-size: 16px;
@base-line-height: 24px;

body {
  font-size: @base-font-size;
  line-height: @base-line-height;
  // 使用数学运算计算 padding
  padding: (@base-line-height - @base-font-size) / 2;
}

（2）混合运算

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .border-radius(10px); // 应用混合（mixin）
  #logo {
    width: 300px;
    height: 100px;
    // 使用数学运算计算圆角大小
    .border-radius(@radius: 10px + 5px); // 应用混合（mixin）并传递参数
  }
}

（3）函数运算

@base-color: #333;

@darken-color(@color, @amount) {
  // 使用函数进行颜色运算
  return darken(@color, @amount);
}

#header {
  background-color: @base-color;
  // 使用函数运算计算背景颜色
  color: @darken-color(@base-color, 10%);
}

（4）属性值运算

@base-padding: 10px;

#container {
  padding: @base-padding;
  #inner {
    // 使用数学运算计算内边距
    padding: @base-padding * 2;
  }
}

---

6.导入

Less 允许导入其他 Less 文件。

@import "variables.less";
@import "mixins.less";

#header {
  .border();
}