Less 混合 #

Mixin（混合）是 Less 最强大的特性之一，它允许你定义可复用的样式块，并支持参数传递、默认值、条件判断等高级功能。

基本用法 #

定义和调用 #

less

// 定义 Mixin
.border-radius() {
  border-radius: 4px;
}

// 调用 Mixin
.box {
  .border-radius();
  background: #f5f5f5;
}

编译结果：

css

.box {
  border-radius: 4px;
  background: #f5f5f5;
}

带 CSS 类的 Mixin #

任何 CSS 类或 ID 选择器都可以作为 Mixin 使用：

less

// 定义普通类
.highlight {
  color: #ff0;
  background: #000;
}

// 作为 Mixin 使用
.warning {
  .highlight();
  font-weight: bold;
}

编译结果：

css

.highlight {
  color: #ff0;
  background: #000;
}
.warning {
  color: #ff0;
  background: #000;
  font-weight: bold;
}

不输出 Mixin #

使用 () 结尾定义不会输出的 Mixin：

less

// 不输出到 CSS
.my-mixin() {
  color: black;
}

// 会输出到 CSS
.my-class {
  color: black;
}

// 使用
.foo {
  .my-mixin();
  background: white;
}

编译结果：

css

.my-class {
  color: black;
}
.foo {
  color: black;
  background: white;
}

参数 #

带参数的 Mixin #

less

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

.box {
  .border-radius(8px);
}

.card {
  .border-radius(12px);
}

编译结果：

css

.box {
  border-radius: 8px;
}
.card {
  border-radius: 12px;
}

多个参数 #

less

.size(@width, @height) {
  width: @width;
  height: @height;
}

.box {
  .size(100px, 50px);
}

编译结果：

css

.box {
  width: 100px;
  height: 50px;
}

分号分隔参数 #

使用分号可以传递包含逗号的值：

less

.font-stack(@family, @fallback) {
  font-family: @family, @fallback;
}

// 使用分号分隔参数
.body {
  .font-stack("Helvetica Neue"; Arial, sans-serif);
}

编译结果：

css

.body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

默认值 #

参数默认值 #

less

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

.box {
  .border-radius(); // 使用默认值
}

.card {
  .border-radius(8px); // 自定义值
}

编译结果：

css

.box {
  border-radius: 4px;
}
.card {
  border-radius: 8px;
}

多参数默认值 #

less

.button(@bg: #007bff, @color: white, @padding: 8px 16px) {
  background: @bg;
  color: @color;
  padding: @padding;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  .button(); // 全部默认
}

.btn-danger {
  .button(#dc3545); // 只传第一个参数
}

.btn-custom {
  .button(#28a745, white, 12px 24px); // 传所有参数
}

编译结果：

css

.btn-primary {
  background: #007bff;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-danger {
  background: #dc3545;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-custom {
  background: #28a745;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

命名参数 #

使用命名参数可以跳过某些参数：

less

.box(@width: 100px, @height: 100px, @color: #333) {
  width: @width;
  height: @height;
  color: @color;
}

.example {
  .box(@color: red); // 只修改 color
}

编译结果：

css

.example {
  width: 100px;
  height: 100px;
  color: red;
}

@arguments 变量 #

@arguments 包含所有传入的参数：

less

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

.card {
  .box-shadow();
}

.elevated {
  .box-shadow(0, 4px, 12px, rgba(0, 0, 0, 0.2));
}

编译结果：

css

.card {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.elevated {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

剩余参数 #

使用 ... 接收可变数量的参数：

less

.box-shadow(@shadows...) {
  box-shadow: @shadows;
}

.card {
  .box-shadow(0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24));
}

编译结果：

css

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

模式匹配 #

根据参数值匹配不同的 Mixin：

less

// 深色主题
.theme(dark, @bg, @color) {
  background: @bg;
  color: @color;
}

// 浅色主题
.theme(light, @bg, @color) {
  background: @bg;
  color: @color;
}

// 通用样式
.theme(@_, @bg, @color) {
  padding: 16px;
  border-radius: 4px;
}

.dark-box {
  .theme(dark, #333, #fff);
}

.light-box {
  .theme(light, #fff, #333);
}

编译结果：

css

.dark-box {
  background: #333;
  color: #fff;
  padding: 16px;
  border-radius: 4px;
}
.light-box {
  background: #fff;
  color: #333;
  padding: 16px;
  border-radius: 4px;
}

条件守卫 #

使用 when 关键字添加条件：

基本条件 #

less

.text-color(@color) when (@color = dark) {
  color: #333;
}

.text-color(@color) when (@color = light) {
  color: #fff;
}

.dark-text {
  .text-color(dark);
}

.light-text {
  .text-color(light);
}

编译结果：

css

.dark-text {
  color: #333;
}
.light-text {
  color: #fff;
}

比较运算符 #

less

.font-size(@size) when (@size < 14px) {
  font-size: @size;
  line-height: 1.6;
}

.font-size(@size) when (@size >= 14px) {
  font-size: @size;
  line-height: 1.5;
}

.small {
  .font-size(12px);
}

.normal {
  .font-size(16px);
}

类型检查函数 #

less

.mixin(@value) when (iscolor(@value)) {
  color: @value;
}

.mixin(@value) when (isnumber(@value)) {
  width: @value;
}

.mixin(@value) when (isstring(@value)) {
  content: @value;
}

.example1 {
  .mixin(red);
}

.example2 {
  .mixin(100px);
}

.example3 {
  .mixin("Hello");
}

组合条件 #

less

.mixin(@size, @color) when (@size > 10px) and (@color = red) {
  border: @size solid @color;
}

.box {
  .mixin(2px, red); // 不匹配
}

.alert {
  .mixin(3px, red); // 匹配
}

默认 Mixin #

less

.mixin(@value) when (@value = red) {
  color: red;
}

.mixin(@value) when (@value = blue) {
  color: blue;
}

.mixin(@value) when (default()) {
  color: #333;
}

.red-text { .mixin(red); }
.blue-text { .mixin(blue); }
.default-text { .mixin(green); }

!important #

在 Mixin 调用后添加 !important：

less

.important-mixin() {
  color: red;
  background: blue;
}

.foo {
  .important-mixin() !important;
}

编译结果：

css

.foo {
  color: red !important;
  background: blue !important;
}

实用 Mixin 示例 #

清除浮动 #

less

.clearfix() {
  &::before,
  &::after {
    content: "";
    display: table;
  }
  
  &::after {
    clear: both;
  }
}

.container {
  .clearfix();
}

文本截断 #

less

.text-ellipsis(@lines: 1) when (@lines = 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis(@lines) when (@lines > 1) {
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-line {
  .text-ellipsis();
}

.multi-line {
  .text-ellipsis(3);
}

Flex 居中 #

less

.flex-center(@direction: row) {
  display: flex;
  flex-direction: @direction;
  justify-content: center;
  align-items: center;
}

.center-horizontal {
  .flex-center();
}

.center-vertical {
  .flex-center(column);
}

绝对定位 #

less

.absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
  position: absolute;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

.cover {
  .absolute(0, 0, 0, 0);
}

.top-right {
  .absolute(10px, 10px);
}

渐变背景 #

less

.gradient(@start, @end, @direction: to right) {
  background: linear-gradient(@direction, @start, @end);
}

.gradient-horizontal {
  .gradient(#007bff, #0056b3);
}

.gradient-vertical {
  .gradient(#007bff, #0056b3, to bottom);
}

响应式断点 #

less

@breakpoints: {
  sm: 576px;
  md: 768px;
  lg: 992px;
  xl: 1200px;
};

.respond-to(@breakpoint, @rules) {
  @media (min-width: @breakpoints[@breakpoint]) {
    @rules();
  }
}

.container {
  width: 100%;
  
  .respond-to(md, {
    width: 750px;
  });
  
  .respond-to(lg, {
    width: 970px;
  });
}

CSS 三角形 #

less

.triangle(@direction, @size, @color) when (@direction = up) {
  width: 0;
  height: 0;
  border-left: @size solid transparent;
  border-right: @size solid transparent;
  border-bottom: @size * 1.732 solid @color;
}

.triangle(@direction, @size, @color) when (@direction = down) {
  width: 0;
  height: 0;
  border-left: @size solid transparent;
  border-right: @size solid transparent;
  border-top: @size * 1.732 solid @color;
}

.triangle(@direction, @size, @color) when (@direction = left) {
  width: 0;
  height: 0;
  border-top: @size solid transparent;
  border-bottom: @size solid transparent;
  border-right: @size * 1.732 solid @color;
}

.triangle(@direction, @size, @color) when (@direction = right) {
  width: 0;
  height: 0;
  border-top: @size solid transparent;
  border-bottom: @size solid transparent;
  border-left: @size * 1.732 solid @color;
}

.arrow-up {
  .triangle(up, 10px, #333);
}

.arrow-down {
  .triangle(down, 10px, #333);
}

最佳实践 #

命名规范 #

less

// 推荐：语义化命名
.text-ellipsis() { }
.flex-center() { }
.gradient() { }

// 不推荐：无意义命名
.mixin1() { }
.do-something() { }

参数设计 #

less

// 推荐：合理的默认值
.box-shadow(@x: 0, @y: 2px, @blur: 4px, @color: rgba(0, 0, 0, 0.1)) {
  box-shadow: @x @y @blur @color;
}

// 不推荐：无默认值
.box-shadow(@x, @y, @blur, @color) {
  box-shadow: @x @y @blur @color;
}

模块化组织 #

less

// _mixins.less
.clearfix() { }
.text-ellipsis() { }
.flex-center() { }

// styles.less
@import "_mixins.less";

.container {
  .clearfix();
}

下一步 #

现在你已经掌握了 Mixin 的使用，接下来学习内置函数来处理颜色、数学运算等！