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‘

  ...

 

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

上一篇:JS事件


下一篇:理解Java中字符流与字节流的区别(转)