Less简明笔记

1. 使用@新建变量

@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);

在css中使用变量：

.link { color: @link-color;}

2. Mixins

首先定义样式：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

以后可在其他代码块中重复使用:

#menu a {
  color: #111;
  .bordered();
}.post a {
  color: red;
  .bordered();
}

3. 嵌套的新写法

原先的

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

可以改写为嵌套写法：

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

4. 对于某一元素的伪选择器的样式，也可以使用 ‘&’ 嵌套在该元素的代码块中

.clearfix {
  display: block;
  zoom: 1;

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