Less基础学习（1）

@charset"utf-8";
/* body颜色*/
body{
     background-color:white;
}


/*
    less定义变量： @变量名：值；例：@test_width:300px;

*/

@test_width:300px;
@test_height:300px;
.box{
    width:@test_width;
    height:@test_height;
    background-color:yellow;

    //混合
    .border;
}


/**
    混合：

**/ 
.border{
    border:5px solid white;     
}


/**
    混合参数：
    1.带参数：必须传值
    2.带默认参数：可以不传值
**/ 

.border_02(@border_width){
    border:solid black @border_width;   
}

/**混合中带参数*/
.test_hunhe_02{
    .border_02(30px);
}

/**混合中带有默认值的*/
.border_03(@border_width:10px){
    border:solid green @border_width;   
}

.test_hunhe_03{
    .border_03(20px);
}

.border_radius(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;  
}
.radius_test{
    width:100px;
    height:100px;
    background-color:green;
    .border_radius(10px);
}

/**匹配模式*/

/*.sanjiao{
     width:0;
     height:0;
     overflow:hidden;

     border-width:10px;
     border-color:transparent transparent red transparent;
     border-style:dashed dased solid dashed; 

}*/

.triangle(top,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:transparent transparent @c transparent;
    border-style:dashed dashed solid dashed;    
}

.triangle(bottom,@w:5px,@c:#ccc){
    border-width:@w;
    border-color:transparent transparent @c transparent;
    border-style:solid dashed dashed dashed;    
}

/**
    @_:固定写法，表示应用 .triangle这个时，必须应用这个样式

**/
.triangel(@_,@w:5px,@c:#ccc){
    width:0;
    height:0;
    overflow:hidden;        
}

.sanjiao{
    .triangle(bottom,100px)
}

.pos(r){
    position:relative;  
}
.pos(a){
    position:absolute;  
}
.pos(f){
    position:fixed; 
}

.pei{
    width:200px;
    height:200px;
    background:red;

    //匹配模式，使用哪个就传哪个
    .pos(a);    
}

/**运算***/

@test_01:300px;
.box_02{
    width:@test_01+20;
    color:#ccc-10;
}

/**嵌套方式**/
.list{
    width:600px;
    margin:30px auto;
    padding:0px;
    list-style:none;

    li{
        height:30px;
        line-height:30px;
        background-color:pink;
        margin-bottom:5px;
     }  
     a{
        float:left;  

        //& :代表他的上一层选择器的意思
        &:hover{
            color:red;  
        }

      } 
      span{
            float:left; 

         }

}


/**
    @arguments :s可以省写变量名
**/
.border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;  
}

.test_arguments{
    .border_arg(40px);  
}

/**
    避免编译;
**/
.test_03{
    width:~'cacl(300px-30px)';         
}

/**
    important
**/
.test_important{
    .border_radius() !important;
}

/**
     less 中导入less
     @import "ku";
     @import (less) "a.css"; 这个写在哪，就会编译在哪个地方

**/