以下是关于 LESS 混入（Mixins） 的详细介绍，包括语法、用法、高级特性及实际示例：

一、简介

混入（Mixins）是 LESS 的核心特性之一，允许将一组 CSS 属性封装成可复用的代码块，类似函数。混入支持参数传递、条件判断和嵌套调用，极大提升代码复用性和灵活性。

二、基础语法

1、定义混入

使用类选择器或 ID 选择器语法定义混入。

1. 无参数混入：

.rounded-corners {
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

2. 带参数混入：

.shadow(@x, @y, @blur: 5px, @color: rgba(0,0,0,0.3)) {
  box-shadow: @x @y @blur @color;
}

2、调用混入

通过混入名直接调用，可传递参数：

.button {
  .rounded-corners; // 调用无参数混入
  .shadow(2px, 2px); // 调用带参数混入（使用默认值）
}

三、核心用法

1、参数与默认值

定义默认参数，简化调用：

.border(@width: 1px, @style: solid, @color: #ccc) {
  border: @width @style @color;
}

.box {
  .border(); // 输出 border: 1px solid #ccc;
  .border(2px, dashed); // 输出 border: 2px dashed #ccc;
}

2、命名参数

通过参数名指定值，忽略顺序：

.gradient(@direction: to bottom, @start: #fff, @end: #000) {
  background: linear-gradient(@direction, @start, @end);
}

.header {
  .gradient(@start: #3498db, @end: #2c3e50); // 指定参数名传值
}

3、@arguments 变量

自动获取所有参数的值：

.margin(@top, @right, @bottom, @left) {
  margin: @arguments; // 等价于 @top @right @bottom @left
}

.element {
  .margin(10px, 20px, 10px, 20px); // margin: 10px 20px 10px 20px;
}

四、高级特性

1、条件守卫（Guards）

使用 when 关键字添加条件判断：

.text-color(@color) when (lightness(@color) > 50%) {
  color: #333; // 颜色较亮时使用深色文字
}
.text-color(@color) when (lightness(@color) <= 50%) {
  color: #fff; // 颜色较暗时使用浅色文字
}

.box {
  .text-color(#3498db); // 根据颜色亮度自动选择文字颜色
}

2、模式匹配

根据参数类型或值匹配不同混入：

// 匹配不同单位
.size(@value) when (ispixel(@value)) {
  width: @value;
}
.size(@value) when (ispercentage(@value)) {
  max-width: @value;
}

.container {
  .size(100px); // width: 100px;
  .size(80%); // max-width: 80%;
}

3、嵌套混入

混入内部调用其他混入：

.base-style {
  padding: 10px;
  margin: 5px;
}

.button {
  .base-style;
  .shadow(2px, 2px);
}

五、实用示例

1、浏览器前缀处理

// 定义兼容性混入
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.button {
  .border-radius(10px); // 自动生成多前缀代码
}

编译结果：

.button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

2、响应式断点混入

// 定义响应式断点
.respond-to(@device, @content) when (@device = mobile) {
  @media (max-width: 768px) {
    @content();
  }
}
.respond-to(@device, @content) when (@device = desktop) {
  @media (min-width: 1200px) {
    @content();
  }
}

// 使用混入
.respond-to(mobile, {
  .menu { display: none; }
});

编译结果：

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

3、生成网格系统

// 生成列宽
.generate-columns(@n, @i: 1) when (@i <= @n) {
  .col-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
.generate-columns(4); // 生成 .col-1 到 .col-4

六、最佳实践

1. 语义化命名：如 .shadow() 而非 .style1()。

2. 参数限制：避免过多参数（建议不超过 5 个）。

3. 模块化拆分：将常用混入集中到 _mixins.less 文件。

4. 避免过度使用：混入适合复用代码，简单样式直接编写 CSS。

七、与 Sass 混入对比

特性	LESS	Sass (SCSS)
参数传递	支持默认参数、命名参数	支持默认参数、关键字参数
条件判断	通过 when 守卫实现	原生支持 @if、@else
循环	通过递归混入模拟	原生支持 @for、@each
返回值	无直接返回值，通过属性赋值模拟	支持 @return 返回值

总结：LESS 混入通过代码复用和逻辑封装，显著提升 CSS 开发效率，尤其适合处理浏览器兼容性、响应式布局和动态样式生成。结合变量和嵌套，可构建高度可维护的样式代码库。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24