CSS预处理器 Less

1. 为什么需要Less？

        CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。而Less在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，使 CSS 更易维护和扩展。LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

 Less（LeanerStyle Sheets ）是一门 CSS扩展语言，也成为CSS预处理器。
less的中文官网：Less.js 中文网 。
bootstrap中less教程：http://www.bootcss.com/p/lesscss/。

2.Less使用

2.1 变量

使用@来申明一个变量：@变量名：属性值；

• 作为普通属性值只来使用：直接使用 font-size:@font14;
• 作为选择器和属性名：#@{selector的值} 的形式
• 作为URL：@{url}

变量名要求：

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

2.2 嵌套规则

(1) 基本嵌套规则

// 嵌套
// 在类名header 中有一个类名nav
.header {
    .nav {
        color: @color;
    }
}
// 等同于css中的
.header .nav {
  color: #fff;
}

(2)  &的使用

注意：结构选择器、伪类选择器等在less时需要注意要用&连接。

//例如
a {
    :hover {
        text-decoration: none;
    }
}
//编译成css就变成了
a :hover {
  text-decoration: none;
}
// 这样是错误的设置，不会产生效果，正确的写法是添加&连接


a {
    &:hover {
        text-decoration: none;
    }
}
a:hover {
  text-decoration: none;
}

2.3 运算

        在less文件中，任何数字、颜色或变量都能参与运算。

// 加（+）、减（-）、乘（*）和、除（/）
// 运算符中间左右有个空格隔开
@w: 30;
@w2: 20;
body {
    width: @w * @w2;      //width: 600;
    height: (@w2 / @w);   //height: 0.66666667;
}

// 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位 
body {
    width: 20px + 30rem;   //width: 50px;
}

// 如果两个值之间只有一个值有单位，则运算结果就取该单位
body {
    height: 20 - 10rem ;   //height: 10rem;
}