Less笔记整理

1、什么是less？

• less是一种css预处理动态样式语言，拓展css语言增加了变量，Mixin，函数等特性，使css更易维护和拓展。
• 可以在客户端上运行，也可以在node服务端运行。
• 详情指路中文官网：http://lesscss.cn/ 

2、less的编译工具：www.koala-app.com。这里就不多介绍其他工具和使用啦(*^▽^*)。
3、less中的注释：以//开头的注释不会被编译，/*注释的内容*/会被编译到css中
4、less的变量：

• 变量的申明：用"@"申明变量，@color：pink；
• 变量的使用：
  • 属性值使用：直接使用@color
  • 属性或选择器使用：@{margin} | @{className} 
• URL：@{url}
•  变量的延迟加载：同一个变量在多处赋值，在作用域中（通俗的讲就是一对{}花括号中），less完全解析完之后 ，最后赋值的变量值，替换作用域中使用变量的地方。

5、less的嵌套规则

•     普通嵌套
•     &特殊嵌套：和普通的嵌套区别在于加了&的在格式上属于子级，编译后属于同级

        .tab-bar{
            width:300px;
            height:300px;
            
            .tab-bar-item{
                width:100px;
                height:100px;
                background:red;
                
                &:hover{
                    background:pink;
                }
            }
        }

        //编译后
        .tab-bar{
            width:300px;
            height:300px;
        }
        .tab-bar .tab-bar-item{
            width:100px;
            height:100px;
            background:red;    
        }
        .tab-bar .tab-bar-item:hover{
            background:pink;
        }

        

6、less的混合（Mixins）
    什么是混合：多处重复使用的样式集。我们可以将其提取作为一个新的样式集，然后在需要使用的地方引入。

• 普通混合

        .border-s{
            border:1px solid #fff;
        }
        .tab-bar{
            width:300px;
            height:300px;
            .border-s;
        }
        .banner{
            width:400px;
            height:500px;
            .border-s;
        }

 

• 不输出的混合：创建一个mixin，但不输出该mixin集合时增加"()"
• 带参数的混合：.tab(@a;@b;@c){}
• 带参数且有默认值：

        .tab(@a:10px;@b:10px;@c:pink){
            width:@a;
            height:@b;
            background:@c;
        }

 

• 命名参数:引用mixin时，当形参和实参不匹配时：.item{.tab(@c:blue);}
• 匹配模式:根据传递给mixin的参数来更改它的行为。"@_"标识的表示，作为默认加载的样式集。注意：mixin名称要一  致

         .tab(@_;@a;@b){
            display: block;
        }
        .tab(W;@a;@b){
            width:@a;
            height:@b;
        }
        .tab(M;@a;@b){
            margin-top:@a;
            margin-right:@b;
        }

        //引用
        .class{
            .tab(W;10px;10px);
        }

        //编译
        .class{
            display: block;
            width:10px;
            height:10px;
        }

 

• arguments变量:实参数组、伪数组

        .border(@a,@b,@c){
            border:@arguments;
        }
        .class{
            .border(1px,solid,red);
        }
        了解即可，实在是用的不多。
7、less的计算：在less中进行简单的加减乘除运算
    数学运算以最左边显式声明的单元类型。如果转换不可能或没有意义，则忽略单位。不可能的转换示例:px到cm或rad到%。
    .class{
        width:2-3cm-5mm;//result is 1.5cm
    }
    
8、less的继承Extend：

•     继承相较mixin性能更高，但是混合的复用性更高，更灵活。
•     exend中是没有小括号"()"的
•     如何需要继承伪类，选择器参数可选跟随关键字all

    

    //extend.css文件
    .tab{
        background:red;
    }
    .tab:hover{
        background:blue !important;
    }
    

    //index.less文件
    @import "extend.less";
    .class{
        width:300px;
        height:300px;
        .item:{
            &:extend(.tab all);
            &:nth-child(1){
                width:100px;
                height:100px;
            }
            &:nth-child(2){
                width:50px;
                height:50px;
            }
        }
    }
    
    //编译后css
    .tab,
    .class .item{
        background:red;
    }
    .tab:hover,
    .class .item:hover{
        background:blue !important;
    }
    .class{
        width:300px;
        height:300px;
    }
    .class .item:nth-child(1){
        width:100px;
        height:100px;
    }    
    .class .item:nth-child(2){
        width:50px;
        height:50px;
    }

9、less避免编译：使用"~"波浪号，会当做字符串
    .test{
        width: ~'calc(300px - 30px)';
    }
    编译：
    .test{
        width: calc(300px - 30px);
    }