Less基础语法

Less 是一种 CSS 预处理器，提供了变量、嵌套、混合（Mixins）、函数等高级功能，使 CSS 更加模块化、可维护和高效。以下是 Less 的 基础语法 和常用特性。

---

一、基本语法

1. 变量（Variables）

使用 @ 定义变量，常用于颜色、字体、尺寸等统一管理。

@primary-color: #3498db;
@font-size: 16px;body {color: @primary-color;font-size: @font-size;
}

---

2. 嵌套（Nesting）

模仿 HTML 结构进行样式嵌套，提高可读性和结构清晰度。

nav {ul {list-style: none;}li {display: inline-block;}a {color: @primary-color;text-decoration: none;&:hover {color: darken(@primary-color, 10%);}}
}

---

3. 父选择器 &

用于引用父级选择器，常用于伪类、伪元素或 BEM 命名规范。

.button {background: #fff;border: 1px solid #ccc;&--primary {background: @primary-color;color: white;}&:hover {background: darken(@primary-color, 10%);}
}

---

4. 混合宏（Mixins）

将一组样式封装成一个“函数”，在多个地方复用。

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

你也可以定义带默认值的 Mixin：

.transition(@property: all, @duration: 0.3s) {transition: @property @duration ease;
}.button {.transition(width, 0.5s);
}

---

5. 运算（Operations）

Less 支持数学运算，方便动态计算样式值。

@width: 100px;
@padding: 20px;.container {width: @width + @padding * 2; // 计算为 140px
}

---

6. 函数（Functions）

Less 提供了丰富的内置函数，如颜色操作、类型判断等。

@base-color: #ad141e;.box {background-color: lighten(@base-color, 20%); // 变浅border-color: darken(@base-color, 10%);     // 变深opacity: fadein(@base-color, 80%);          // 设置透明度
}

---

7. 导入（Import）

可以导入其他 .less 或 .css 文件。

// _variables.less
@primary-color: #3498db;// main.less
@import "variables";body {background: @primary-color;
}

---

8. 命名空间与访问控制

你可以将 Mixin 封装到一个命名空间中，避免污染全局作用域。

#theme() {.default-colors() {background: #f0f0f0;color: #333;}
}.use-theme {#theme.default-colors();
}

---

9. 条件判断与循环

条件判断（Guards）

通过 when 实现逻辑判断。

.mixin(@a) when (lightness(@a) >= 50%) {background: black;
}
.mixin(@a) when (lightness(@a) < 50%) {background: white;
}.test {.mixin(#ddd);
}

循环（Looping）

Less 不直接支持 for 循环，但可以通过递归实现：

.generate-columns(5);.generate-columns(@n, @i: 1) when (@i <= @n) {.col-@{i} {width: percentage((@i / @n));}.generate-columns(@n, (@i + 1));
}

---

二、编译方式

你可以通过以下方式将 .less 编译为 .css：

• Node.js + lessc

  npm install -g less
  lessc styles.less styles.css
  

• VSCode 插件：Easy LESS 或 Live Sass Compiler

• 构建工具集成：Webpack、Vite、Gulp 等均支持 Less 插件。

---

三、建议

技术点	推荐做法
模块化开发	使用 _partial.less 分文件组织代码
变量命名	使用语义化命名如 @color-primary, @spacing-md
组件化样式	每个组件一个 .less 文件，配合命名空间
避免过度嵌套	控制嵌套层级不超过 3 层
使用 Mixin 而非继承	提升可维护性
注释与文档	使用注释说明变量用途和组件说明