CSS（七）前端预处理技术——Less

一、Less

　　1、简介：

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

　　　　Less 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数。LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，

　　　　也可以借助Node.js或者Rhino在服务端运行。　　

　　　　Less是一个JS库，所以他可以在客户端运行，相对Sass则必须在服务端借助Ruby运行

　　2、学习方法：　

　　　　中文网站： http://www.lesscss.net/

　　　　英文官网： http://lesscss.org

　　　　less源码： https://github.com/cloudhead/less.js

　　　　github地址： https://github.com/less/less.js

　　3、开始理解：

　　　　3.1：变量——@变量名:值;

　　　　　　以@作为变量的起始标识，变量名由字母、数字、_和-组成。

　　　　　　没有先定义后使用的规定。

　　　　　　以最后定义的值为最终值。

　　　　　　可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接。

　　　　　　定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式。

　　　　　　存在作用域，局部作用域优先级高于全局作用域。

　　　　3、2：简单的例子

　　使用在线编译方法：

　　　页面中直接引用less的源码，使用javascript动态翻译，这样在开发阶段非常方便，但是在运行阶段会影响效率，建议在开发阶段使用less.js在线处理，项目稳定运行时将less文件预处理。

　　步骤一：

　　　　下载到less.js动态处理.less文件的javascript脚本，下载地址： https://github.com/less/less.js

　　步骤二：

　　　　在页面中引入样式与less.js文件，如下：

　　　　　　html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet/less" type="text/css" href="css/noe.less">
        <script type="text/javascript" src="js/less.min.js" ></script>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
        <div class="div6"></div>
    </body>
</html>

　　　　　　less代码：

@color: #f5f5f5;
@ 200px;
.div1{
    background:@color;
}
@color: #ff00ff; //覆盖第一次的定义
.div2{
    background: @color;
}
div{
    width: @width;
    height: @width;
    float: left;
    border: 1px solid red;
}

　　3、3：混入(Mixins)

　　　　类似函数或宏

　　　　定义函数，@radius是参数，3px是默认值

　　　　.borderRadius(@radius:3px){

　　　　　　-moz-border-radius: @radius;
　　　　　　-webkit-border-radius: @radius;
　　　　　　border-radius: @radius;

　　　　}

　　　　使用函数，带参数

　　　　#header { .borderRadius(10px); }

　　　　不带参数使用默认参数
　　　　.btn { .borderRadius}

　　注意：

　　　　a)、可以不使用参数 .wrap(){…} .pre{ .wrap }，也可以使用多个参数
　　　　b)、内置变量@arguments代表所有参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }

　　注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，否则会导致整个页面内的less语法出错而失效。
　　　　c)、Mixins必须使用ID或者类，即#xx或.xx，否则无效。

　　　　例示代码：

@color: #f5f5f5;
@ 200px;
.div1{
    background:@color;
}
@color: #ff00ff; //覆盖第一次的定义
.div2{
    background: @color;
}
div{
    width: @width;
    height: @width;
    float: left;
    border: 1px solid red;
}
//计算
.div3{
    height: @width/2;
}
/*混入(Mixins)*/
/*定义 @width一个参数，@color第二个参数,并且都赋予默认值*/
.circle(@100px, @color:red) {
    width: @width;
    height: @width;
    background: @color;
    border-radius: @width/2;
    float: left;
}
.div(@x:0, @y:0, @blur:1px, @color:#000) {
    box-shadow: @arguments;
}
/*调用*/
.div5 {
    .circle();/*默认值*/
}
.div6 {
   .circle(200px,#fff);/*带参数*/
   .div(5px,5px);
}
.div7 {
    .circle(300px);/*带一个参数*/
}

　　3、4：嵌套

　　允许将多个CSS选择器嵌套在一起，&表示当前选择器的父选择器

#header { 
　　&.fl{ float: left; }
　　.mln { margin-left: 0; } 
} 
/*生成*/
#header.fl{float: left;} 
#header .mln {margin-left: 0;}

　　3、5：运算

/*运算*/
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
@base-color:lightblue;
.cls41{
    color: #888 / 4;
    background-color: @base-color + #111;
    height: 100% / 2 + @filler;
}

　结果：

.cls41 {
  color: #222222;
  background-color: #bee9f7;
  height: 60%;
}

　　3、7：继承

　例示代码

/*继承*/
.animal {
    background-color: black;
    color: white;
}
.bear {
    &:extend(.animal);
    background-color: brown;
}
.mouse{
    &:extend(.animal);
}

　　编译结果

/*继承*/
.animal,
.bear,
.mouse {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}

　　3、8:变量作用域

　　　　同一级的变量后者覆盖前者，内部变量优先级高于外部变量，变量只在同一个文件中生效。

/*作用域*/
@len:10px;
.cls61{
    @len:20px;
    height:@len;
}
.cls62{
    width:@len;
}
@len:30px;
.cls63{
    height: @len;
}

　　编译结果：

.cls61 {
  height: 20px;
}
.cls62 {
  width: 10px;
}
.cls63 {
  height: 10px;
}

　　3、9：注释：

/*注释*/
.cls71{
   width: 100px;  //单行注释，CSS中不允许单行注释，Less允许
    height:100px; /* 多行注释，CSS与Less都允许 */
}

　　结果：

/*注释*/
.cls71 {
  width: 100px;
  height: 100px;/* 多行注释，CSS与Less都允许 */
}

　　3、10：循环：

　　　　在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 递归调用自身
  width: (10px * @counter); // 每次调用时产生的样式代码
}

div {
  .loop(3); // 调用循环
}

　　编译结果：

div {
  width: 30px;
  width: 20px;
  width: 10px;
}

　　使用循环生成栅格系统

.generate-columns(5);
.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}

　　编译结果：

.column-1 {
  width: 20%;
}
.column-2 {
  width: 40%;
}
.column-3 {
  width: 60%;
}
.column-4 {
  width: 80%;
}
.column-5 {
  width: 100%;
}

　　3、11：颜色函数

　　Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数

　　例子：

.cls52 {
    /*增加一定数值的颜色亮度。*/
    background: lighten(blue,20%);
}

　　编译结果：

.cls52 {
  /*增加一定数值的颜色亮度。*/
  background: #6666ff;
}