less基础教程

less

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

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

Less编译工具

配合webpack使用 https://github.com/webpack-contrib/less-loader

less中的注释

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

less中的变量&嵌套规则

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

@selected:#wrap;
@innerClass:.inner;
*{
    margin: 0;
    padding: 0;
}
@{selected}{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    @{innerClass}{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: @color;
        height: 100px;
        width: 100px;
        &:hover{
            background: pink;
        }
    }
}

<div id="wrap">
  <div class="inner"></div>
</div>

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合      
2.不带输出的混合
3.带参数的混合
4.带参数并且有默认值的混合
5.带多个参数的混合
6.命名参数
7.匹配模式
8.arguments变量

.border(@w,@style,@c){
    border: @arguments;
}
.juzhong(@w:10px,@h:10px,@c:pink){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: @c;
    height: @h;
    width: @w;
}
.triangle(@_,@wwww,@ccccc){
    width: 0px;
    height: 0px;
    overflow: hidden; 
}

.triangle(L,@w,@c){
    border-width: @w;
    border-style:dashed solid dashed dashed;
    border-color:transparent @c transparent transparent ;
}

#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
       .juzhong(100px ,100px,pink);
    }
    .inner2{
       .juzhong();
       .juzhong(@c:black);
       .triangle(R,40px,yellow)
    }
    .border(1px,solid,black)
}

less运算

在less中可以进行加减乘除的运算

@rem:100rem;


#wrap .sjx{
   width:(100 + @rem)
}

less避免编译

margin: 100 *  10px;
padding: ~"cacl(100px + 100)";

加双引号

less继承

.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.juzhong:hover{
    background: red!important;
}

.juzhong(@w,@h,@c){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background: @c;
}


#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
			  &:extend(.juzhong all);
        &:nth-child(1){
           .juzhong(100px,100px,deeppink);
        }
        &:nth-child(2){
           .juzhong(50px,50px,yellow);
        }
    }
}

使用继承可以减少编译后的css文件重复代码，主要extend是继承的类没有（），也就代表他不能用参数，灵活度比较低

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

覆盖element-ui样式使用/deep/可以穿透局部样式 获取全局覆盖