js学习总结----less的基础语法和使用

LESS的语法基本上分为以下几个方面:变量、混合(Mixins)、嵌套规则、运算、函数、作用域等

1、变量（和JS中的变量一样，不是使用VAR而是使用@,@还可以定义一些url地址等）

@color:#fff;
@url:'../img/banner';

.box{
    color:@color;
    background:url("@{url}/banner1.jpg") no-repeat;
}

2、混合(Mixins)  通俗的讲就是把其他的样式拿过来自己使用  （如果在下述的public加一个括号变为函数，则最后编译的时候public这段样式代码会不存在）

　　征用:把原来的样式克隆一份一模一样的拿过来使用，如果public加上括号，public本身就不编译了

.public{
    width:100px;
    height:100px;

}
.box{
    .public;
}

还有下面的一种写法。

　　公用:和原来的选择器公用一套样式，但是需要保证原来的选择器不加括号

.box{
    &:extend(.public)
}
/*编译后结果*/
.box,.public{
    width:100px;
    height:100px;
}

3、命名空间和作用域（每一个{}里面就是一个单独的作用域，和js一样）

@v:1;
.box{
    @v:10;
    &:hover{
        z-index:@v;//为10
    }
}

4、！important

.public(){
    width:100px;
    height:100px;
    .link{
        width:200px;
        height:200px;

    }
    &:hover{
        background:#eee;
    }
}
.box{
    .public;/*把public及子孙元素的样式都继承过来了*/
    .public !important /*这样box下面的所有样式都会加!important*/
}

5、函数

.public(@x,@y){
    @result:@x+@y;
}
.box{
    .public(10,20);
    z-index:@result;
}
/*条件*/
.public(@x) when (@x<10) and (@x>0){
    background:red;
}
/*还有一些方法 iscolor isnumber...*/
.public(@x) when (iscolor(@x)){
    background:green
}

/*Loops  递归*/

.public(@n,@i:1) when (@i<=@n){
    .box-@{i}{
        & when (@i=1){
            width:100px;
        }
        & when (@i=3){
            width:100px;
        }
        & when (@i=2){
            width:200px;
        }
        & when (@i=4){
            width:200px;
        }
    }
    .public(@n,@i+1);
}

.public(@n:4);

/*+(用逗号隔开) 和 +_(用空格隔开)*/
.transform(@v:1){
    -webkit-transform+_:scale(@v)
}
.box{
    .transform(1.5);
}
.box2{
    .transform(1.5);
    -webkit-transform+_:rotate(45deg);/*相当于-webkit-transform:scale(1.5) rotate(45deg)*/
}


.box{
    width:100px;
    height:50px;
    &-top{
        font-size:15px
    }
}
.box2{
    width:100px;
    height:50px;
    .link &{
        font-size:15px 
    }
    /*上面相当于*/
    .link .box2{
        font-size:15px 
    }
}

/*导入公共样式*/
@import (reference) "common"; /*reference 只引入文件不编译*/