LESS基础用法详解

LESS 基础用法详解

LESS（Leaner Style Sheets）是一种动态样式语言，它在 CSS 的基础上增加了变量、嵌套、混合、运算、函数等特性，使得样式表更加灵活、可维护。本文将详细介绍 LESS 的所有基本用法，帮助你快速掌握 LESS 的核心语法和功能。

---

1. 变量（Variables）

LESS 允许你为常用的值（如颜色、字体大小等）定义变量，便于统一管理和修改。

@primary-color: #4CAF50;
@font-size: 16px;body {color: @primary-color;font-size: @font-size;
}

注意： 变量名以 @ 开头。

---

2. 嵌套（Nesting）

LESS 支持样式的嵌套，类似于 HTML 结构，增强了代码的可读性。

nav {ul {margin: 0;padding: 0;li {display: inline-block;a {color: @primary-color;}}}
}

---

3. 混合（Mixins）

混合（Mixin）允许你定义一组样式，然后在其他选择器中复用这些样式。

3.1 基本混合

.rounded-corner {border-radius: 5px;-webkit-border-radius: 5px;
}.button {.rounded-corner;background: @primary-color;
}

3.2 带参数的混合

.box-shadow(@x: 0, @y: 0, @blur: 5px, @color: #333) {box-shadow: @x @y @blur @color;
}.panel {.box-shadow(2px, 2px, 10px, #666);
}

---

4. 运算（Operations）

LESS 支持对数值、颜色等进行加减乘除等运算。

@base: 10px;.box {width: @base * 2;   // 20pxheight: @base + 5;  // 15pxmargin: @base / 2;  // 5px
}

颜色也可以运算：

@color: #888;.header {color: @color + #111; // #999999
}

---

5. 函数（Functions）

LESS 内置了许多实用的函数，如颜色操作、字符串处理、数学运算等。

5.1 颜色函数

@base: #f04615;.light {color: lighten(@base, 20%); // 变亮
}
.dark {color: darken(@base, 20%);  // 变暗
}
.alpha {color: fade(@base, 50%);    // 设置透明度
}

5.2 数学函数

@width: 100px;.box {width: ceil(@width / 3);   // 向上取整height: floor(@width / 3); // 向下取整margin: round(@width / 3); // 四舍五入
}

---

6. 作用域与变量覆盖

LESS 变量有作用域，嵌套作用域内可以覆盖外层变量。

@color: red;.box {@color: blue;color: @color; // blue
}.text {color: @color; // red
}

---

7. 导入（Import）

LESS 支持 @import 导入其他 LESS 文件，便于模块化开发。

@import "reset.less";
@import (less) "theme.less";

注意： LESS 会自动识别 .less 后缀。

---

8. 选择器插值（Selector Interpolation）

可以通过变量动态生成选择器。

@name: banner;.@{name}-title {font-size: 24px;
}

编译后：

.banner-title {font-size: 24px;
}

---

9. 继承（Extend）

通过 :extend 关键字实现选择器继承。

.button {padding: 10px;color: white;
}.primary-btn:extend(.button) {background: @primary-color;
}

---

10. 注释

LESS 支持单行（//）和多行（/* ... */）注释。

// 这是单行注释
/* 这是多行注释 */

---

11. 条件语句（Guards）

LESS 支持在混合中使用条件判断。

.set-color(@color) when (lightness(@color) >= 50%) {color: black;
}
.set-color(@color) when (lightness(@color) < 50%) {color: white;
}.text {.set-color(#ddd);
}

---

12. 循环（Loops）

LESS 通过递归混合实现循环。

.loop(@i) when (@i > 0) {.item-@{i} { width: (10px * @i); }.loop(@i - 1);
}
.loop(5);