LESS的使用

less入门

1.less是什么？
less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Mixin(混合)、函数等特性，使css更具维护和扩展
less既可以在客户端上运行，也可以借助node.js在服务器运行

2.变量
在less中

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

在CSS中编译为

#header {
  width: 10px;
  height: 20px;
}

如下面这样的代码，我们可能会看到数十上百次

a,{
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

变量能让我们从一个地方控制这些值，便于维护

@link-color:#428bca;
a, {
  color: @link-color;
}
.widget {
  color: #fff;
  background: @link-color;
}

3.混入
混入是一种将一组属性从一个规则集包含到另一个规则集的方法。假设我们定义了一个class如下：

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

那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:

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

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

4.嵌套
假设我们有如下代码

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

为了使代码书写更加方便，我们可以这样写

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

用less书写的代码更加简洁，并且模仿了HTML的组织结构

我们还可以使用此方法将伪选择器与混入一同使用

.clearfix {
  display: block;
  zoom: 1;

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