less语法(一)

做加法

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

*上述例子中@表示变量类似于js中的var.

结果：

#header {
  color: #6c94be;
}

Mixins

可以提取公用的属性。复用

不一定非要使用类名。也可以使用id名 例如：#bordered

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

结果：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

在#menu a中使用.bordered时也可以换成.bordered(),

也可以：

.a, #b {
  color: green;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

结果：

.a,#b {
  color: green;
}
.mixin-class {
  color: green;
}
.mixin-id {
  color: green;
}

如果你想创建一个mixin但你不想让mixin成为输出：

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

结果：

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

可以看到在输出中没有显示

.my-other-mixin

在Mixins包含选择器：

eg:

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

显示结果：

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

eg:

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;
}

// all do the same thing
#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();

不可以这样：（会报错）

.c {
  #outer() > .inner();
}

显示结果：

#outer .inner {
  color: red;
}
.c {
  color: red;
}

The !important keyword

eg:

.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;
}

Nested Rules

eg:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

显示结果：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

&代表当前父元素：(represents the current selector 

parent)

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

显示结果：

.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

不可以像下面这样：

.clearfix() {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

像上面的例子显示不出样式。