NFH.014 - LESS基础认知

---

2.21学习经验分享#

Bruce_Zhu于2017.2.21

---

一、LESS基础

1. LESS 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。并且LESS 可以运行在 Node 或浏览器端。

2. 本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

二、 LESS编译方法

1. 方式1 在客户端运行LESS转换程序，了解在html中引入xx.less,同时再引入less.js,就是一个可以运行在客户端浏览器中的LESS编译程序 -- 效率偏低，不推荐使用。

2. 方式2 在服务端运行LESS转换程序

   1） 下载并安装一款服务器端的js解释器-nodejs

   2） 下载LESS文件的转换程序lessc --js脚本

   3） 在服务器端js解释器运行lessc转换器，把自己编写的.less文件转换为css文件

       a) 可以在命令行中使用转换程序
   
   C:\Users\Administrator>node.exe lessc my.less my.css
   
       b) 在HBuilder中使用转换程序
   

   4）在 HTML文件中，引用编译得到的css文件

3. 方式3 使用Sublime Text来转换LESS文件

   1） 打开Sublime Text，然后用Ctrl + Shift + P调出插件控制台，搜索LESS2CSS插件并下载。

   2） 安装好后，当你写好LESS文件后按Ctrl + S即可在当前LESS文件目录下自动编译好.CSS文件（前提是要安装好Nodejs）

三. LESS语法学习

1. LESS完全支持CSS语法

2. LESS支持单行注释和多行注释，但只有多行注释会被转换到CSS文件中

3. LESS支持变量(variable)

   @变量名：值

   使用：选择器 {样式：@变量名}

4. LESS支持样式混合-在一个样式中引用另一个样式

    .class1(){...}
    .class2{..
        ...
         .class1
         ...
    }
   

5. 带参混合

    .class()(@参数1，@参数2，。。。){....}
   
    .class2 {
   
        ...
          .class(参数1，参数2);
        ...
        }
    }
   

6. 嵌套规则

    .class1{
   
     ...
   
   .class2 {
   
       }
    }
   
    转换的结果
   
    .class1{
   
    }
   
    .class1 .class2{
   
      }