less语法

✨全面详解 Less 语法教程（含示例）

在现代前端开发中，CSS 预处理器是一大利器。而 Less（Leaner Style Sheets）就是其中的重要成员，它让你写 CSS 更像在编程！

本文将系统讲解 Less 的语法，包括：变量、嵌套、混入（Mixin）、运算、函数、继承、映射、命名空间等内容，并展示 Less 源码与编译后 CSS 的对比，助你真正掌握它的精髓

---

什么是 Less？

Less 是一种 CSS 预处理语言，添加了编程特性（变量、运算、函数等），最终编译成普通 CSS。

️ 使用场景：

• 构建大型项目样式体系
• 提高样式复用性和可维护性
• 统一主题/设计系统变量

---

基础语法与使用示例

1. 变量（Variables）

@main-color: #3498db;
@padding: 10px;

.box {
  color: @main-color;
  padding: @padding;
}

编译后：

.box {
  color: #3498db;
  padding: 10px;
}

---

2. 嵌套（Nesting）

.nav {
  ul {
    li {
      a {
        color: @main-color;
      }
    }
  }
}

编译后：

.nav ul li a {
  color: #3498db;
}

---

3. 混入（Mixins）

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

.avatar {
  .rounded(50%);
}

编译后：

.avatar {
  border-radius: 50%;
}

---

4. 运算（Operations）

@base: 100px;
@margin: 20px;

.container {
  width: @base + @margin * 2;
}

编译后：

.container {
  width: 140px;
}

---

函数（Functions）详解

Less 拥有丰富的内置函数：

颜色函数

.primary {
  color: lighten(#3498db, 10%);
}
.danger {
  color: darken(#e74c3c, 15%);
}

编译后：

.primary {
  color: #5dade2;
}
.danger {
  color: #c0392b;
}

➗ 数学函数

.math {
  width: ceil(10.2px);  // 11px
  height: floor(10.8px); // 10px
}

类型判断

.check {
  result: isnumber(123);  // true
}

---

高级语法

继承（Extend）

.btn {
  padding: 10px;
  border: none;
}

.primary-btn:extend(.btn) {
  background: blue;
}

编译后：

.btn,
.primary-btn {
  padding: 10px;
  border: none;
}
.primary-btn {
  background: blue;
}

---

映射（Maps）

#colors() {
    primary: blue;
    secondary: green;
    accent: orange;
}
.button {
    // 使用中括号语法访问
    color: #colors[primary];
    background: #colors[secondary];
    border-color: #colors[accent];
}

编译后：

.button {
  color: blue;
  background: green;
  border-color: orange;
}

---

#lightTheme() {
    bg: white;
    text: black;
    border: #ddd;
}

#darkTheme() {
    bg: #333;
    text: white;
    border: #666;
}

.theme-switch(@theme) {
    background-color: @theme[bg];
    color: @theme[text];
    border-color: @theme[border];
}

.light-mode {
    .theme-switch(#lightTheme);
}

.dark-mode {
    .theme-switch(#darkTheme);
}

编译后：

.light-mode {
  background-color: white;
  color: black;
  border-color: #ddd;
}

.dark-mode {
  background-color: #333;
  color: white;
  border-color: #666;
}

命名空间（Namespaces）

#themes {
  .light {
    background: #fff;
    color: #000;
  }
  .dark {
    background: #000;
    color: #fff;
  }
}

.site {
  #themes.light();
}

编译后：

.site {
  background: #fff;
  color: #000;
}

---

实用案例展示

@border-radius: 8px;
@shadow: rgba(0, 0, 0, 0.1);

.card {
  padding: 20px;
  border-radius: @border-radius;
  box-shadow: 0 4px 12px @shadow;

  &:hover {
    box-shadow: 0 6px 16px @shadow;
  }
}

---

✅ 总结

特性	作用说明
变量	提高样式一致性和可维护性
嵌套	模拟 DOM 结构，结构清晰
混入	抽象和复用样式
运算	灵活控制尺寸、位置等
函数	提供计算、判断、处理颜色等强大能力
继承	样式共享不重复
映射	类似对象，结构化变量管理
命名空间	避免命名冲突、组织逻辑

---

推荐资源

• 官方文档：https://lesscss.org
• VS Code 插件：Live Sass Compiler（支持 Less）
• 在线工具：https://lesscss.org/less-preview

---