Less学习笔记（超简单）

0、前言

Less是一个动态样式语言，赋予了CSS动态语言的特性，学习Less是容易的。

在开发时一般编写.less文件，用link标签引入并设置rel为stylesheet/less，然后在其下用script标签引入less.js文件。
less.js文件（点击进去，右键另存为即可~）
需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less。

在生产阶段，一般用npm下载Less工具包，将.less文件转换成.css文件。

开发阶段这样用：

在生产阶段时，要先将.less文件转成.css文件（主要是为了性能，当然不转也是可以的。）

    // 在命令行工具中（首先要安装npm，或者是安装有Node环境，因为Node环境中默认带有npm了）
    npm install less -g //如果已经安装过了就略过这一条命令
    cd xxx  // 进入你的.less文件目录
    lessc study.less study.css // 这样就转换成功了

看一下.less的内容和转换后的.css内容

    // .less文件内容
    @nice-blue: #5B83AD;
    @hover-color: yellow;
    @div-padding: 20px;
    @border-color: seagreen;
    .border{
        border-top: solid 2px @border-color;
        border-bottom: solid 2px @border-color;
    }
    .div1{
        background-color: @nice-blue;
        padding: @div-padding;
        .border;
        &:hover{
            background-color: @hover-color;
            cursor: pointer;
        }
    }
    

    // .css文件内容（转换出来的文件）
    .border {
      border-top: solid 2px seagreen;
      border-bottom: solid 2px seagreen;
    }
    .div1 {
      background-color: #5B83AD;
      padding: 20px;
      border-top: solid 2px seagreen;
      border-bottom: solid 2px seagreen;
    }
    .div1:hover {
      background-color: yellow;
      cursor: pointer;
    }
    

下面简单讲述Less中的一些特性。

1、变量

变量的好处是显而易见的，例如多处用到同一个颜色值等。想必微调的时候基本都会有四处找对应选择器的经历，麻烦而且容易出错。
less用变量就轻松解决了这个问题。
在less中，用@name: 20px;其中@name表示声明变量，20px则是它的值，用到的时候写@name，到时候less.js会进行转换。看如下代码：

    // less内容（注意，变量值可以是颜色值，单位值，字符串url等）
    @border-color: seagreen;
    .border{
        border-top: solid 2px @border-color;
        border-bottom: solid 2px @border-color;
    }
    
    // 实际转换内容
    .border {
      border-top: solid 2px seagreen;
      border-bottom: solid 2px seagreen;
    }

2、混合（混入）

混合（或者说是混入，以下称混合），就是类似组件的东西，可以定义最小的样式，然后在其他地方多次引用（去掉了很多重复的劳动）。

    
    
 我是学习Less的div 
    
    // less内容（注意看 引用 .border的地方）
    @border-color: seagreen;
    .border{
        border-top: solid 2px @border-color;
        border-bottom: solid 2px @border-color;
    }
    .div1{
        background-color: @nice-blue;
        padding: @div-padding;
        .border;  // 这部分就是混合的内容!! 也可以用.border(); 这样子来表示。
    }
    
    // 实际转换内容
    .border {
      border-top: solid 2px seagreen;
      border-bottom: solid 2px seagreen;
    }
    .div1 {
      background-color: #5B83AD;
      padding: 20px;
      border-top: solid 2px seagreen;
      border-bottom: solid 2px seagreen;
    }

3、嵌套

嵌套则是用类似html的组织树的形式编写样式代码，使代码看起来立体，一目了然。

    // 假设有以下css代码
    #header {
      color: black;
    }
    #header .navigation {
      font-size: 12px;
    }
    #header .logo {
      width: 300px;
    }
    
    // 则他们可以像这样写
    #header {
        color: black;
        .navigation {
            font-size: 12px;
        }
        .logo {
            width: 300px;
        }
    }
    
    // 又比如像本文开始部分写的代码
    // 当前元素的伪类则用&连接。
    .div1{
        ...
        &:hover{
            background-color: @hover-color;
            cursor: pointer;
        }
    }
    // 最终转换成
    .div1 {
      ...
    }
    .div1:hover {
      background-color: yellow;
      cursor: pointer;
    }
    

4、运算

即可以进行简单的四则运算，和css中的calc()函数相应的能力，可以运算单位和颜色等。（总体来说，还是尽可能进行显示转换单位后进行计算，以防止不必要的错误产生。）

    // 换算单位
    // numbers are converted into the same units（数字会被转换成相应的单位再继续计算）
    @conversion-1: 5cm + 10mm; // result is 6cm
    @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm （这里的2会被转成2cm后在进行计算）

    // conversion is impossible
    @incompatible-units: 2 + 5px - 3cm; // result is 4px（这里的2会被转成2px，3cm会被转成3px后在进行计算）

    // example with variables
    @base: 5%;
    @filler: @base * 2; // result is 10%
    @other: @base + @filler; // result is 15%
    
    // 换算颜色
    @color: #224488 / 2; //results in #112244
    background-color: #112244 + #111; // result is #223355

5、内置函数

less中内置了许多的函数，用于处理颜色、字符串、数学运算、类型转换等，这部分内容感兴趣的可以看看。

6、命名空间和访问器

有时候可能需要将所有的 混合 代码组织起来，以便于维护和后续的重用分发。less中提供了这样的功能（不要和css的命名空间搞混了）

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

现在我们只用其中的一部分

    #header a {
      color: orange;
      #bundle > .button;
    }

7、Maps

不太好组织语言，先略过。

8、作用域

和js的作用域一样，即内部的变量可以覆盖全局变量；或者是相同的变量，后面的值会覆盖前面声明的。

    less内容
    @var: red;
    #page {
      @var: white;
      #header {
        color: @var; // white
      }
    }

9、注释

分为多行注释和单行注释，很好理解。

10、导入（官方解释）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

    @import "library"; // library.less
    @import "typo.css";

11、总结

总体来说，less给css添加了许多很实用的功能，是个值得学习的工具，而且它的学习成本很低，就酱。