buershero/less

关于less

LESS

less mixins

---

##mixins

请注意,当你叫mixin,括号是可选的。

####用法一

.a, #b{
    color:red;
}

.a,
.a();

####选择器MIXINS

mixin不仅仅可以包含属性,它们可以包含选择器。

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

编译后

button:hover{border:1px solid red;}

####命名空间

#my-library {
  .my-mixin() {
    color: black;
  }
}
// 可以这样用
.class {
  #my-library > .my-mixin();
}

####重要的关键字

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo(1);
}
.important {
  .foo(2) !important;
}

编译后

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}