less-高级参数和@reset变量

less-高级参数和@reset变量

1、.mixin(3)

编辑less：

.mixin(@a: 3) {
    property: @a;
}
p{ .mixin();}

生成css：

p {
  property: 3;
}

2、.mixin(…)

编辑less：

.mixin(@listofvariables...) {
  border: @listofvariables;
}
p {
  .mixin(1px; solid; red);
}

生成css：

p {
  border: 1px solid red;
}

3、.mixin(@a; @b)

编辑less：

.mixin(@a; @b) {
  margin: @arguments; 
  right:extract(@arguments,2); 
  top:@b;
}
p {.mixin(1px; 2px);}

生成css：

p {
  margin: 1px 2px;
  right: 2px;
  top: 2px;
}

4、.mixin(@a; …)

编辑less：

.mixin(@a; ...) { color: @a;}
.mixin(@a) { background-color: contrast(@a); width:100%;}
.mixin(@a; @b;) { background-color: contrast(@a); width:@b;}
p {
.mixin(red);
}
p.small {
.mixin(red,50%);
}

生成css：

p {
  color: red;
  background-color: #ffffff;
  width: 100%;
}
p.small {
  color: red;
  background-color: #ffffff;
  width: 50%;
}

5、.mixin(@a; @rest…)

编辑less：

.mixin(@color,@padding...) { 
  color: @color; 
  padding: @padding 
}
p {
.mixin(red; 10px; 20px; 5px; 5px);
}

生成css：

p {
  color: red;
  padding: 10px 20px 5px 5px;
}