CSS——Sass和Less的特点和比较

Sass和Less
　　  Sass和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一种编程的特性，如：变量、语句、函数、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。
　　Sass官网地址：http://sass-lang.com/
　　Less官网地址：http://lesscss.org/
语法：
　　注释:

//单行注释不会被编译出来
/*
　　多行注释，也就是CSS的注释方式，可以编译出来
*/

　　变量：
　　　　Less 　　@variable_name
　　　　Sass 　　$variable_name
　　插值:

　　　　Less

@variable_name : margin;
@{variable_name} : auto;

　　　　Sass 

$variable_name : margin;
#{$variable_name} : auto;

　　作用域
　　　　Less 　　变量查找遵循就近原则。
　　　  Sass 　　作用域是有顺序的
　　选择器嵌套

ul{
    li{
        div{margin:10px;}
        p{margin:20px}
    }
}       

　　伪类嵌套

ul{
    li{
        div{margin:10px;}
    }
    &:hover{
        background:red;
    }
}            

　　属性嵌套(仅Sass有，Less没有)

ul{
    &:hover{
        background:red;
        font : {
            size:10px;
            weight:bold;
        }
    }
}    

　　运算、单位、转义、颜色
　　　　Less:
　　　　　　单位：当两个数值相加时，若单位不同，以第一个数值的单位为准
　　　　　　转义：~"20px / 1.5"
　　　　　　颜色：颜色的数值 * 2 = 数值二倍的颜色

@num : 100px;
.box1{
    width : @num * 3;
    height : @num + 2em;
    margin : 2em + @num;
    pading : ~"20px / 1.5";
    color : #102302 * 2;
}

　　　　Sass:
　　　　单位：Sass中比较严格，单位不同，不能进行运算
　　　　运算：默认 / 是进行分割操作；若想运算需加括号：(20px / 1.5)
　　　　颜色：同样可以计算

$num : 100px;
.box2{
    width : $num * 3;
    margin : 20px / 1.5;
    pading : (20px / 1.5);
    color : #102302 * 2;
}

　　函数
　　　　通用：
　　　　　　round() 四舍五入取整
　　　　　　percentage() 转换成百分比的形式
　　　　　　...
　　　　Less特有:
　　　　　　sqrt() 开方
　　　　　　...
　　　　Sass特有:
　　　　　　random() 产生随机数
　　　　　　...
　　　　　　还可自定义函数：

@function sum($n,$m){
    @return $n + $m;
}
fontsize : sum(4px,5px);

　　混入(把不同的CSS组合到一起)
　　　　Less：

/*既渲染又混入*/
.show{
    display : 'block';
}
/*仅混入，()可以表示仅混入，也可以进行传参*/
.hide(){
    display : 'none';
}
.box3{
    fontsize : 16px;
    .show;
    .hide();
}

　　　　Sass:

/*Sass仅混入，加()也可传参*/
@mixin show{
    display : block;
}
.box4{
    width : 100px;
    @include show;
}

　　命名空间(仅Less有)

#nm(){
    .show{display : inline-block; }
}
.box5{
    #num.show;
}

　　继承
　　　　Less:

.line{
    display : inline;
}
.box6{
    &:extend(.line);
}
.box7{
    &:extend(.line);
}

　　　　Sass:

.line{
    display : inline;
}
.box7{
    @extend .line;
}
.box8{
    @extend .line;
}

/*line仅占位，不渲染*/
%line{
    display : inline;
}
.box7{
    @extend %line;
}
.box8{
    @extend %line;
}

　　合并(多个值合并到一齐)
　　　　Less:

.box9{
    /*
        合并用','隔开
    */
    background+ : url(a.png);
    background+ : url(b.png);
    /*
        合并用空格隔开
    */
    tranform+_ : scale(2);
    tranform+_ : rotate(30deg);
}

　　　　Sass:

$background : (
    a : url(a.png),
    b : url(b.png)
);
$tranform : (
    a : scale(2),
    b : rotate(30deg)
);
.box9{
    background : map-values($background);
    transform : zip(map-values($tranform)...);
    /*
        zip()把逗号去掉变成空格
    */
}    

　　媒体查询

.box10{
    @media all and (min-width : 768px){
        width : 600px; 
    }
}

　　条件
　　　　Less:

@count : 5;
.get(@cn) when (@cn > 4){
    width : 100px + @cn;
}
.get(@cn) when (@cn < 4 ){
    width : 10px + @cn;
}
.box11{
    .get(@count);
}

　　　　Sass:

$count : 5;
.box11{
    @if($count >4){
        width : 100px + @count;
    }
    @else{
        width : 10px + @count;
    }
}

　　循环
　　　　Less:

@count2 : 0;
.get2(@cn) when (@cn < 3){
    .get((@cn+1));
    .box-@{cn}{
        width : 100px + @cn;
    }
}
.get2(@count2);
    

　　　　Sass:

@for $i from 0 through 2{
    .box-#{$i}{
        width : 100px + $i;
    }
}

　　导入

@import './xxx.scss'
@import './xxx.less'

　　...