Less基本语法使用 and sass基本语法

LESS
1、注释
//  　　不会被编译
/**/   会被编译
2、变量
@bgColor:yellow;    

.border{
    border:2px solid pink;
}
h1{
    width:80%;
    height:60px;
    .border;    
    color: #000;
    background:@bgColor;  
    span{
        font-size: 12px;
        font-weight: 700;
    }
} 
3、嵌套
nav.top{
    background:#333;
    height: 50px;
    ul{        
        display: flex;
        width:960px;
        height: 50px;
        margin: 0 auto;
        li{
            a{
                display: block;
                line-height: 50px;
                padding:0 20px;
                color: #fff;
                &:hover{
                    color: #000;
                }
            }
            &:hover{
                background:pink;  //表示鼠标悬浮在li元素上的颜色改变
            } 
        }
        /* li:hover{
            background:pink;   
        } */
         
    }
}

4、运算
@w:960px;
.box{
    width:@w/2 - 100;
}


5、混合
.title{
    font-family: '楷体';
    font-size:20px;
    background: pink;
}
.box{
    width:100px;
    height:100px;
    .title;
}
5.1 混合（带参数，传递参数）
.border(@borderWidth:1px,@borderColor:#ccc){
    border:@borderWidth solid @borderColor;
}
.box{
    .border(10px,#000);
    width:100%;
    height:50px;
}
.box2{
    width:400px;
    height:400px;
    .border(5px,red);
}

6、匹配
//bootstrap3以及之前版本基于less开发的，之后版本基于sass开发的
//公共样式   @_表示公共样式
.btn(@_){
    display:inline-block;
    text-align: center;
    background: #09c;
    color: #fff;
}
.btn(sm){
    padding:3px 8px;
    font-size: 14px;
    border-radius: 2px;
    box-shadow: 3px 3px 3px #333;
}
.btn(md){
    padding:4px 10px;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: 4px 4px 4px #333;
}
.btn(lg){
    padding:5px 15px;
    font-size: 18px;
    border-radius: 4px;
    box-shadow: 5px 5px 5px #333;
}

6.1 匹配（更灵活的匹配，带参数）
.btn(@_,@bgColor,@color){
    display:inline-block;
    text-align: center;
}
.btn(sm,@bgColor,@color){
    padding:3px 8px;
    font-size: 14px;
    border-radius: 2px;
    box-shadow: 3px 3px 3px #333;
    background: @bgColor;
    color: @color;
}
.btn(md,@bgColor,@color){
    padding:4px 10px;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: 4px 4px 4px #333;
    background: @bgColor;
    color: @color;
}
.btn(lg,@bgColor,@color){
    padding:5px 15px;
    font-size: 18px;
    border-radius: 4px;
    box-shadow: 5px 5px 5px #333;
    background: @bgColor;
    color: @color;
}

//调用匹配
.btn1{
    .btn(lg,#000,#fff);
}


7、避免编译:使用'~'符号避免编译
.box{
    width:'~100px + 300px*2px';
}


8、@arguments  包含所有传递进去的参数
.border(@borderWidth,@borderStyle,@borderColor){
    border:@borderWidth @borderStyle @borderColor;
    border:@arguments;
}
.box{
    .border(1px,solod,red);
}

 

 

SASS
//sass，不兼容css,且语法严格
$width: 200px;    //必须有空格
.box
    width: $widtg
    height: 500px


//scss 兼容css语法
$color:red;
.box{
    background: $color;
}


//scss全局变量与局部变量
$color:pink;   //全局变量
.box{
    $bgcolor:yellow;   //局部变量
    color:$color;
    background: $bgcolor;
}