Less 简单使用（一）

一、前言

      

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。在越来越多的项目中都已经在使用Less或Sass方式替代原来的css书写方式了。

使用方式：

$ npm install -g less

二、简单语法：

  1、变量：     

输入：

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

#header {
  color: @light-blue;
}

输出：

#header {
  color: #6c94be;
}

2、混合：Mixins是一种将一组属性从一个规则集包含（“混入”）到另一个规则集的方法。

例如:

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

我们希望在其他规则集中使用这些属性。好吧，我们只需要输入我们想要属性的类的名称，如下所示：

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

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

输出为：

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

当然，这种混合也可以结合带有参数的方式来写。

3、嵌套：

Less使您能够使用嵌套代替或与级联结合使用。假设我们有以下CSS：

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

在Less中，我们也可以这样写：

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

简单明了。