SASS是CSS预处理器，同LESS一样
刚学前端时就使用的LESS，一直到此前。
刚进入新公司，这边使用SASS作为预处理。
SASS编译依赖ruby,安装sass之前需要安装ruby。
这里对SASS中能用到的特性做一些整理，以及和LESS直接的差异。

SASS

安装

windows安装

  • 安装ruby.
    下载地址：http://rubyinstaller.org/

  • 安装sass
    在命令行中执行：

    gem install sass

    使用 

    sass -v

    查看是否安装成功

  • 编译sass文件

    sass demo1.scss demo1.css

变量

变量声明

用 $ 符号作为开头，如

1
2
3
4
$color: red;//定义
body{
    background:$color; //使用
}

LESS中使用 @ 符号开头： @color: red;
LESS中变量只能定义一次，作为常量使用

嵌套

表示层级关系，与HTML中的树形结构一样

1
2
3
4
5
6
7
8
9
.wrap{
    .text{
        .{
            #tmp{
                color:white;
            }
        }
    }
}

对应的HTML结构如下：

1
2
3
4
5
<div class="wrap">
    <div class="text">
        <div id="tmp"></div>
    </div>
</div>

LESS写法一样

引入外部文件

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import ‘reset.css’，
那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

1
@import 'base';

LESS语法相同

mixin

使用@mixin 声明
定义：

1
2
3
4
5
6
7
8
9
10
@mixin text-center{
    text-align:center;
}
@mixin abs($width,$height){
    position:absolute;
    top:0;
    left:0;
    width:$width;
    height:$height;
}

使用：

1
2
3
4
body{
    @include text-center;
    @include abs(100%,100%);
}

LESS使用方法不一样：
定义：

1
2
3
4
5
6
7
8
9
10
.text-center{
    text-align:center;
}
.abs(@width,@height){
    position:absolute;
    top:0;
    left:0;
    width:@width;
    height:@height;
}

使用：

1
2
3
4
body{
    .text-center;
    .abs(100%,100%);
}

继承/扩展

定义：

1
2
3
.text-center{
    text-align:center;
}

使用:

1
2
3
body{
    @extend .text-center;
}

LESS中的继承/扩展跟mixin使用方法一样

运算

可进行简单的加减乘除运算

1
2
3
4
body{
    width: 800px * 0.5;
    height: 100% * 0.5;
}

LESS语法相同

条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$flag:true;
$color: white;
body{
    @if $flag{
        background: black;
    }@else {
        background: gray;
    }

    @if $color == white{
        color:white;
    }@else{
        color:blue;
    }
}

三元预算：if($condition, $if_true, $if_false)

1
2
3
$type:test;
if($type == test, 100px,100%)
=> 100px;

LESS中的条件语句可以通过关键字 when 实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.setColor(@count) when (@count >= 10){
    color:white;
}
.setColor(@count) when (@count < 10){
    color:black;
}

使用:
body{
    .setColor(10);
}

输出:

body{
    color:white;
}

函数

SASS有自己已经定义好的函数库。也可以自定义函数。
自定义函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
@function plus10($count){
    @return $count * 10;
}

body{
    width: plus10(50px);
}

输出:

body{
    width: 500px;
}

LESS也有自己定义的函数库，比如处理颜色的lighten、darken等。

循环语句

for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@for $item from 1 through 2{
    .item-#{$item}{//这里的引用需要使用#{}的形式
        width:10px * $item;
    }
}

输出：

.item-1{
    width:10px;
}
.item-2{
    width:20px;
}

@each循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$img-list: apple, huawei, xiaomi;
@each $img in $img-list{
    .#{$img}-icon{
        background-image:url('#{$img}.png');
    }
}

输出:

.apple-icon{
    background-image:url('apple.png');
}
.huawei-icon{
    background-image:url('huawei.png');
}
.xiaomi-icon{
    background-image:url('xiaomi.png');
}

LESS循环：

1
2
3
4
5
6
7
8
9
10
11
12
13
//定义
.loop(@count) when(@count > 0){
    .loop(@count - 1);
    width:10px * @count;
}

//调用
.loop(3);

输出：
width:10px;
width:20px;
width:30px;

与SASS相比，LESS的循环语句比较难用。

注释

使用 // 进行单行注释 编译后的css文件不会保留该注释
使用 /**/进行多行注释。编译后的css文件会保留该注释

编码

在注释中有中文时，需要设定文件的编码，在头部加入

@charset "utf-8";

否则编译不能通过

本文地址： http://gehaiqing.com/2016/10/12/sass/