mixin使用（css）

一 定义

mixin是一种简化代码的方法，能够提高代码的重复使用率， Less 和 SCSS（Sass）中都可以使用此功能。虽然这两者在语法和实现细节上有所不同，但它们都提供了类似的功能，使得代码可以重用样式块。

二 Less中使用

在 Less 中，mixin 主要通过 .mixinName() 函数调用来实现。

定义：

/* styles.less */
.rounded-corners(@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

使用：

/* styles.less */
.box {
  .rounded-corners(10px);
}

三 Sass中使用

可以使用 @mixin 和 @include 关键字来实现。

定义：

/* styles.scss */
@mixin rounded-corners($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

使用：

/* styles.scss */
.box {
  @include rounded-corners(10px);
}