less复习

less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less中的注释

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

less中的变量

使用@来声明一个变量，如：

@myColor：pink; 
@m: margin; 
@url:img/1.png;

注意：

less中的变量是块级作用域生效！

在作为属性值使用时直接 background: @myColor 即可。

如果该变量是用作属性名，则加上大括号：@{m}:10px。

如果该变量作为url，也要加上大括号：background:url(@{url})。

在less中变量是延迟加载的，比如.demo{@var:1; two:@var; @var:2;}最终two的值为2，因为变量延迟加载，等到加载var时，下面的声明覆盖了上面的声明。

less中的嵌套规则

基本嵌套规则

.wrap{
    color:blue;
    .inner{
        color:red;
    }
    &:hover{
        color:pink;
    }
}

最终的效果是：

.wrap{color:blue}
.wrap .inner{color:red}
.wrap:hover{color:pink}

&的使用

如上面例子所示，&可以表示平级的选择器，不让其变成子级。

less中的混合(mixin)

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

普通混合，这样的混合less，编译后公共的部分依旧存在css中。

.myStyle{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.inner1{
    .myStyle;
}
.inner2{
    .myStyle;
}

不带输出的混合，将变量转换成类似函数的方式，公共部分不会输出。

.myStyle(){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
.inner1{
    .myStyle;
}
.inner2{
    .myStyle;
}

带参数的混合，可以进一步抽取出属性值，便于统一设置。

.myStyle(@w,@h){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:@w;
    height:@h;
}
.inner1{
    .myStyle(100px,100px);
}
.inner2{
    .myStyle(200px,200px);
}

带参数并且有默认值的混合，指定了默认值后可以不传参数。

.myStyle(@w:100px,@h:100px){
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:@w;
    height:@h;
}
.inner1{
    .myStyle();
}
.inner2{
    .myStyle(200px,200px);
}

less继承

.myStyle{
    border: 1px solid red;
}
.myStyle.test{
    background:red;
}
.myStyle:hover{
    background:green;
}

//继承
#wrap{
    width:100px;
    height:100px;
    .inner{
        //加上all代表.myStyle的所有状态都继承
        &:extend(.myStyle all); 
        &:nth-child(1){}
        &:nth-child(2){}
    }
}