sass小记

安装

• 需要ruby环境

编译

通过命令行编译

• 单文件转换命令

1

sass style.scss style.css

• 单文件监听

1

sass --watch style.scss:style.css

• 多文件监听

1
2

// 监视src/css文件夹中的所有sass文件，自动编译并放到dist/css目录下
sass --watch src/css:dist/css

• 反编译（将css反译成sass）

1

sass-convert style.css style.sass

• 编译风格

1
2
3
4
5
6
7
8
9
10
11

// nested，默认参数，嵌套式
sass --watch src/css:dist/css --style nested

// expanded，展开式
sass --watch src/css:dist/css --style expanded

// compact，紧凑式
sass --watch src/css:dist/css --style compact

// compressed，压缩式
sass --watch src/css:dist/css --style compressed

GUI图形化界面编译

• 例如：Koala

自动化编译

• 编辑器插件（例如：sublime）
• 自动化构建工具（例如：gulp，webpack）

注释

• 单行注释（不会被编译进css）

1

// 单行注释

• 多行注释（会被编译进css）

1
2
3

/**
 * 多行
 */

• 重要注释（”/*”后跟一个”!”，即使压缩模式，该注释不会被压缩）

1
2
3

/*!
 * 重要注释
 */

导入

@import，编译时不同于常规css中的import，会将导入的scss文件合并生成一个css文件，但如果导入的是一个css文件，就和普通css导入效果一致，不会合并成一个文件。
导入sass文件时，可以忽略scss扩展名，被导入文件一般以”_”开头，例如：_rest.scss。导入的时候省略下划线和扩展名，写成@import "rest"。

变量

普通变量

• 以$开头声明变量

1
2
3
4

$fontSize: 16px;
h3{
    font-size: $fontSize; //使用变量
}

特殊变量

• 字符串中嵌套变量需要写在”#{}”中
• font属性连写，”/“前后如果有变量需要写在”#{}”中

1
2
3

$fontSize: 16px;
$side: left;
margin-#{$side}: 10px; // 字符串中嵌套变量

多值变量

• list类型：类似数组形式，多个值通过空格，逗号或者小括号分隔。

1
2
3
4
5
6
7

$linkColor: #333 #f00;
a{
    color: nth($linkColor,1);
    &:hover{
        color: nth($linkColor,2);
    }
}

• map类型：类似对象，由key和value成对出现，value又可以是list。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$headers: (h1: 2em,h2: 1.5em,h3: 1em); // 声明变量headers
@each $head, $size in $headers{ // 循环两个新变量head和size
    #{$head} {
        font-size: $size;
    }
}

// 编译后
h1{
    font-size: 2em;
}
h2{
    font-size: 1.5em;
}
h3{
    font-size: 1em;
}

嵌套

待续。。。