浅析less

目前主流css预编译语言有sass，less，stylus等，个人由于最先接触less，所以对此比较有认同感～～～

less是一门CSS预处理语言，增加了变量，Mixin，函数等特性，使得CSS更加方便维护，开发；less可以运行在Node或者浏览器，但最终都是将.less文件转换成.css文件，因为浏览器渲染时只能识别.css文件；

不同情况下使用less编译器编译less文件

　　1.1 使用less编译器手动编译

　　　　在nodejs环境中，通过npm全局安装less编译器，手动编译.less文件；这种方式简单粗暴，效率低下，如果项目中有很多.less文件，缺点显而易见，不过这不失是了解less的简单方式；以下是具体的使用方式：

// 全局安装less编译器
npm install less -g 
// 安装好之后，新建文件夹less，新建文件test.less
mkdir less    cd less    touch test.less
// 书写less代码后，使用lessc命令编译
// 编译当前.less文件，并输出到test.css
lessc test.less test.css

　　　　当然lessc命令也有自己的参数，比如--clean-css(表示编译后进行压缩，要安装less-plugin-clean-css插件)等;

// 安装less-plugin-clean-css插件
sudo npm install less-plugin-clean-css -g
// 使用参数--clean-css压缩
lessc --clean-css test.less test.min.css

　　

　　1.2 sublime text 3中使用less

　　　　sublime text是前端开发神器，同时提供了大量的插件包可以完成各种任务；在sublime中编辑，编译less文件无疑是一件快乐的事；在sublime text3中用到的插件为：less，less2css，想要正确地使用这两个插件需要提前全局安装less编译器；

// 第一步：全局安装less编译器，以及插件less-plugin-clean-css
// 如果不安装编译器或者压缩插件，在使用时会报错，具体为何报错，下面步骤阐述
sudo npm install less  less-plugin-clean-css -g

// 第二步：安装 less插件  这是less语法高亮插件

// 第三步：安装less2css插件，在保存.less文件时会在同级目录下生成名称相同的.css文件；虽然less2css原本是sublime2的插件，但是sublime3也可以使用；

　　　　在上述安装过程中，如果不提前安装less编译器以及less-plugin-clean-css插件，在保存less文件时报错，原因如下：less2css插件并没有封装less编译器等，因此不具备编译能力，less2css插件在用户command+s/ctrl+s保存时，也要调用系统中已经安装好的less编译器，如果没有安装编译器肯定报错；less-plugin-clean-css插件功能是压缩代码，在保存时除了调用了编译器同时也调用了压缩代码的插件，所以也要安装此插件；

 　　1.3 grunt/gulp构建工具中使用less

　　　　grunt／gulp构建工具中同样可以使用less，个人比较喜欢gulp流式工作流程；在这两个构建工具中使用less不作简述，以下是参考文档：

　　　　grunt中使用less：https://www.npmjs.com/package/grunt-contrib-less

　　　　gulp中使用less：https://www.npmjs.com/package/gulp-less

 　　1.4 webpack中使用less && vuejs单文件组件中使用less

　　　　在使用reactjs或者vuejs框架时，首选webpack模块打包器，如何在webpack中使用less或者如何在vue单文件组件中使用less呢？

// 安装less编译器 ，less-loader
npm install less less-loader

// 在webpack.config.js配置文件中配置参数
// 详细配置参照：https://www.npmjs.com/package/less-loader

　　　　如何在vuejs单文件组件中使用less呢？在完成上述安装配置后，只需要如下操作即可：

<style lang="less"></style>

　　　　在单文件style标签中声明预处理语言后即可使用less语法，在webpack打包时就会将此处的less语言编译成css；在日常工作中，如果选型vuejs框架，这种方式是非常适用的；

　　1.5 在浏览器端直接使用less

　　　　这种用法不同于之前四种方法，以上四种都是在开发环境中已经将less文件编译成css文件，而这种是直接将less文件加载到生产环境中，浏览器在运行时，通过less.js脚本将.less文件转换成浏览器能够渲染的.css文件；显然这种使用方式效率不高，加重了浏览器的负担；具体使用参见：http://lesscss.org/#using-less-third-party-tools 

less 基础学习

　　预编译语言less方便了对html样式的操作，引入了变量，Mixni，函数，嵌套，运算等；不像以前写css那样一行行的写，而且父子节点样式之间没有层次结构，很多像width／height等属性数值写死，这在后期维护中十分的麻烦；less引入的特性很好的解决了这些痛点，能够很好地看清楚层次结构，方便修改等；

 　　2.1 变量

　　　　变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了

// .less文件
@nice-blue: #5B83AD;
@ligt-blue: @nice-blue + #111;
p{ color:@ligt-blue; }

// 编译后
p{ color: #6c94be; }

　　2.2 混合 mixin

　　　　混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样；这个是less的关键知识点，需要重点掌握；minix可以提高类的利用率；

// LESS
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

/* 生成的 CSS */
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

　　2.3 嵌套

　　　　可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰

// LESS
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border- 1px }
    }
  }
}

/* 生成的 CSS */
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border- 1px;
}

　　2.4 函数与运算

　　　　运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值

// LESS
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

 　　2.5 namespaces 命名空间

　　　　为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 像下面这样在#bundle中定义一些属性集之后可以重复使用:

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

// 只需要在 #header a中像这样引入 .button:
#header a {
  color: orange;
  #bundle > .button;
}

 　　2.6 作用域

　　　　这点很重要，LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}

 　　以上只是less核心点，还有很多细节知识点，作为入门，首先要掌握重点；更过内容参考官方文档；

参考：(优质的文档能够准确，快速地理解掌握知识点；感谢以下文档)

　　1.bootstrap中文官网文档

　　2.less中文官网文档