那些less不曾注意的写法

1、The !important keyword

less中，允许将一个类嵌入到另一个类中，被嵌入的类也可以看作变量。换句话说，你可以用一个类定义样式，然后把它当做变量，在另一个类中，只要引用变量的名字，就能使用它的所有属性。

Less把这种特性称作 mixin，目的是从现有的样式中添加属性。

当 !important 在mixin调用之后放置时，它会将所有继承的属性标记为 !important

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

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

2、Selectors 选择器

@mySelector: banner;

// Usage
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

.banner{font-weight:bold;line-height:40px;margin:0 auto}

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

.widget{color:#0ee;background-color:#999}