less-带参数的混合（arguments）

最新推荐文章于 2025-07-20 09:33:08 发布

Mengzy007

最新推荐文章于 2025-07-20 09:33:08 发布

阅读量3.2k

点赞数

分类专栏： less 文章标签： less 参数混合 arguments

less 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Less中的混合（mixin）功能，特别是如何使用参数，包括多个参数的传递、命名参数的定义、@arguments变量的运用以及@rest变量在模式匹配中的应用，旨在帮助开发者更好地掌握Less的高级特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、

编辑less：

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

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

生成css ：

#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

2、mixin与多个参数

编辑less：

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000,10);
}

生成css：

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
  //这里没有生成color-3，是由于参数对应不上
}

3、命名参数

编辑less：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

生成css：

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

4、@arguments 变量

编辑less：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

生成css：

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

5、@rest 变量

编辑less：

.mixin(...) {        // matches 0-N arguments
.mixin() {           // matches exactly 0 arguments
.mixin(@a: 1) {      // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) {    // matches 1-N arguments


.mixin(@a; @rest...) {
   // @rest is bound to arguments after @a
   // @arguments is bound to all arguments
}

6、模式匹配

编辑less：

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

@switch: light;

.class {
  .mixin(@switch; #888);
}

生成css：

.class {
  color: #a2a2a2;
  display: block;
}