CSS预处理器 Less

1 less是什么

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网：​​​http://lesscss.cn/​​​ 。

bootstrap中less教程：​​​http://www.bootcss.com/p/lesscss/​​。

2 Less编译工具

koala 官网：​​www.koala-app.com​​ 。

3 less中的注释

• 以​

  ​//​

  ​​开头的注释，不会被编译到​

  ​css​

  ​文件中
• 以​

  ​/**/​

  ​​包裹的注释会被编译到​

  ​css​

  ​文件中

4 less中的变量

使用@来申明一个变量：​

​@pink：pink;​

​

1. 作为普通属性值只来使用：直接使用​

   ​@pink​

   ​
2. 作为选择器和属性名：​

   ​#@{selector的值}​

   ​的形式
3. 作为​

   ​URL​

   ​​：​

   ​@{url}​

   ​
4. 变量的延迟加载

5 less中的嵌套规则

1. 基本嵌套规则
2. ​

   ​&​

   ​的使用

6 less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式：

1. 普通混合
2. 不带输出的混合
3. 带参数的混合
4. 带参数并且有默认值的混合
5. 带多个参数的混合
6. 命名参数
7. 匹配模式
8. ​

   ​arguments​

   ​变量

7 less运算

在​

​less​

​文件中，任何数字、颜色或变量都能参与运算，就是​

​less​

​​提供了​

​+​

​​、​

​-​

​​、​

​*​

​​、​

​/​

​算术的运算。代码如下：

/*是在less文件里写*/
@width:10px + 5;
div {
/*其实就变成了15px的边框*/
  border:@width solid skyblue;
}
/*生成的css文件是这样的*/
div {
  border:15px solid skyblue;
}
/*甚至还以带小括号，比如说下面这种 和数学中的一样，先算小括号再去相乘*/
width:(@width + 5) * 2;
@baseFont:50;

/* 也可以定义一个变量*/
div {
/*就等同于88/50 但要记得需要有其中一个数值带单位*/
/*如果两个数值都没有单位，那的出来的值也没有单位*/
  width:88rem / @baseFont;
}      

注意点：

1. 运算符中间左右必须有空格隔开 ​

   ​1px + 5​

   ​；
2. 对于两个不同单位值之间的运算，运算结果的值会取第一个值的单位 ​

   ​18rem + 5px​

   ​​，单位就是​

   ​rem​

   ​​，不是​

   ​px​

   ​；
3. 如果两个值之间只有一个值有单位，则运算结果就取该单位

8 less避免编译

.test_03{
　　width: 300px;
　　height: calc(300px - 30px);
}
=>
.test_03 {
　　width: 300px;
　　height: calc(270px);
}      

.test_03{
　　width: 300px;
　　height: ~'calc(300px - 30px)';
}
=>
.test_03 {
　　width: 300px;
　　height: calc(300px - 30px);
}      

9 less继承

1. 性能比混合高
2. 灵活度比混合低