Less

Less 的简介

　　Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
　　　　写完了以后要对其进行编译，编译为css。

　　less 是一款比较流行的预处理 CSS，支持变量、混合、函数、嵌套、循环等特点。

　　称这种语言叫语法糖（糖衣语法）
　　浏览器只会认html，css，JavaScript，完全就不知道less是什么，写完了以后要对其进行编译，让浏览器认识它
　　语法糖：给你一点甜头，让你写的很爽，语法简单，写更少的代码

　　css预处理语言，与之类似的由sass

　　使用less的方法：
　　　　1.服务端：nodejs
　　　　2.浏览器：在浏览器环境中使用 Less 能自己做的就自己做
　　　　3.客户端：koala工具

　　sublime推荐下载对应的插件 less lessc lesshight

　　less文件是以.less结尾的文件
　　在html页面中引入对应的编译后的css文件

　　css不用去管他了，只需要写less文件，只需要维护less文件即可

　　不像jquery jquery就必须用jquery的方法
　　less文件中，你想写less就写less，你想css就写css，混着写都是OK

less 的语法

　　注释

　　　　less 的注释可以有两种。

　　　　第一种注释：模板注释

　　　　　　//less的注释

　　　　　　因为 less 要转换为 css才能在浏览器中使用。转换成 css 之后，这种注释会被删除（毕竟 css 不识别这种注释）。

　　　　第二种注释：CSS 注释语法

　　　　　　/*这个是注释*/

　　　　　　总结：如果在less中写注释，我们推荐写第一种注释。除非是类似于版权等内容，就采用第二种注释。

　　定义变量

　　　　

 　　　　我们可以把重复使用或经常修改的值定义为变量，在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量。

　　　　（1）在less文件中，定义一个变量的格式：

@变量名: 变量值;        //格式

@bgColor: #f5f5f5;      //格式举例

//必须@前缀　　不能以数组开头，不能包含特殊字符，区分大小写

　　　　（2）同时，在 less 文件中引用这个变量。

　　　　　　最终，less文件的完整版代码如下：

　　　　　　main.less：

// 定义变量
@bgColor: #f5f5f5;

// 引用变量
body{
    background-color: @bgColor;
}

　　　　我们将上面的less文件编译为 css 文件后（下一段讲less文件的编译），自动生成的代码如下：

　　　　　　main.css：

body{
    background-color: #f5f5f5;
}

　　嵌套规则

　　　　

// 嵌套规则
ul {
    width: 300px;
    height: 300px;
    li{
        text-align: center;
        a{
            color: #f00
        }
    }
    a{     //本身就是ul底下的，为了效率
        text-decoration: none;
        &:hover{    //在里面使用&符号就表示元素的本身
            color: #f0f;
        }
    }
}

 

　　　　在 css 中经常会用到子代选择器，效果可能是这样的：

.container {
  width: 1024px;
}

.container > .row {
  height: 100%;
}

.container > .row a {
  color: #f40;
}

.container > .row a:hover {
  color: #f50;
}

　　上面的代码嵌套了很多层，写起来很繁琐。可如果用 less 的嵌套语法来写这段代码，就比较简洁。

　　嵌套的举例如下：

　　main.less:

.container {
  width: @containerWidth;

  > .row {
    height: 100%;
    a {
      color: #f40;

      &:hover {
        color: #f50;
      }

    }
  }

  div {
    width: 100px;

    .hello {
      background-color: #00f;
    }

  }
}

　　将上面的less文件编译为 css 文件后，自动生成的代码如下：

　　main.css

.container {
    width: 1024px;
}

.container > .row {
    height: 100%;
}

.container > .row a {
    color: #f40;
}

.container > .row a:hover {
    color: #f50;
}

.container div {
    width: 100px;
}

.container div .hello {
    background-color: #00f;
}

　　Mixin混入

　　Mixin 的作用是把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了，非常方便。

　　（1）在 less 文件中定义一个类：（将重复的代码放到自定义的类中）

/* 定义一个类 */
.roundedCorners(@radius: 5px) {
　　border-radius: @radius;
}
/* 括号里的内容是参数：这个参数是缺省值 */

 （2）在 less 文件中引用上面这个类：

#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

内置函数

　　less 里有一些内置的函数。

　　main.less:

body {
  background-color: lighten(#000, 10%);   // 让黑色变亮 10%
  color: darken(#fff, 10%);               // 让白色变暗 10%
}

　　将 上面的 main.less 编译为 main.css 之后，自动生成的代码如下：

　　main.css：

body {
  background-color: #1a1a1a;
  color: #e6e6e6;
}

在 index.html中直接引用 less.js

　　做法一：写完 less文件后，将其编译为 css 文件，然后在代码中引用css文件。

　　做法二：在代码中直接用引用 less 文件。