03_CSS预处理器-Less小记

less

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

less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

Less编译工具

koala 官网:www.koala-app.com 

less中的注释

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中  

less中的变量

使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载

less中的嵌套规则

1.基本嵌套规则
2.&的使用

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式
在less中混合前面+"."
1.普通混合

.mixin{} /*该混合样式及混合名，编译后，会被添加到css当中去（不会用这种方式）。*/

2.不带输出的混合

.mixin () {} /*在混合名后面加（），编译成css就不会写入。*/

3.带参数的混合

定义混合（比如写一个居中的通用样式）
.juzhong(@w,@h,@c){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}
在页面元素中使用
#box1{
    .juzhong(100px,100px,pink); /*在该混合项中依次传入参数*/
    z-index: 1;
}

4.带参数并且有默认值的混合

.juzhong(@w：100px,@h,@c){ /*在参数用“：”来指定形参默认值*/
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}

5.带多个参数的混合

6.命名参数

.juzhong(@w:100px,@h:100px,@c:pink){
    width: @w;
    height: @h;
    background: @c;
}

#box2{
    .juzhong(@h:200px;@c:deeppink;);/*当实参个数与形参个数不一致时，实参可以指定实参传值*/
}

7.匹配模式
8.arguments变量

less运算

在less中可以进行加减乘除的运算（计算的一方带单位就可以了，多个单位取第一个单位）

less避免编译

当有时候，用到css的calc函数让浏览器来计算，我们不希望less编译，
在less中避免编译用~""包裹起来。

width:~"calc(200px + 700px)";

less继承

性能比混合高
灵活度比混合低

/*定义一个通用的样式类common*/
.common:hover{
    background: pink;
}
.common{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

/*通过&来父级引用，用extend()函数*/
.juzhong(@w:100px,@h:100px,@c:pink){
    &:extend(.common all);/*all,表示有关于common的所有样式，比如hover都去继承*/
    width: @w;
    height: @h;
    background: @c;
}
/*在元素中应用juzhong这个混合*/
#box1{
    .juzhong();
    z-index: 1;
}
#box2{
    .juzhong(@h:200px;@c:deeppink;);
}
/*最终编译的成css，#box1和#box2都会继承common的样式*/
.common:hover,
#box1:hover,
#box2:hover {
  background: pink;
}