node-sass 的安装和使用

安装

npm install node-sass -g

安装慢的话 可以考虑淘宝镜像

安装成功：

node-sass -v node-sass 4.5.3 (Wrapper) [JavaScript] libsass 3.5.0.beta.2 (Sass Compiler) [C/C++]

使用

变量

sass 变量用于存储一些常用的颜色，数值等，一个变量可以在多处使用，修改时只需要修改一处

SCSS

$color-primary: #0070e9; a { color: $color-primary; } .btn-primary { background-color: $color-primary; }

CSS

a { color: #0070e9; } .btn-primary { background-color: #0070e9; }

嵌套

Sass 允许嵌套规则，使 CSS 更易于维护。

SCSS

.header { height: 60px; .navbar { display: flex; > li { flex: 1; a { dislay: block; font-size: 18px; } } } }

CSS

.header { height: 60px; } .header .navbar { display: flex; } .header .navbar > li { flex: 1; } .header .navbar > li a { dislay: block; font-size: 18px; }

⚠️ 尽量控制嵌套数在 4 层以内。

& 引用

Sass 提供了 & 用于引用父选择器。

SCSS

a { color: #555; &:hover { color: #333; } &:active { color: #444; } }

CSS

a { color: #555; } a:hover { color: #333; } a:active { color: #444; }

@import

Sass 的 @import 指令用于导入其他样式模块。

假设现有 _variables.scss _buttons.scss _forms.scss 三个模块，可以通过一个 main.scss 导入这些模块。

// main.scss @import "variables"; @import "buttons"; @import "forms";

子模块文件前面的下划线用于告知 Sass 编译器不要把这个模块编译成单独的 CSS 文件。

嵌套 @import

Sass 的 @import 指令可以嵌套在选择器内，产生嵌套效果。

SCSS

@import "variables"; @import "mixins"; .slamdunk { min-width: 320px; @import "navbar"; @import "content"; @import "players"; }

⚠️ CSS 也有 @import，在 IE 6-8 上会导致多个 CSS 文件不能同时下载的情况，影响网页性能。

运算

Sass 支持对数字标准的算术运算(加法 +，减法 - ，乘法 *，除法 / 和取模 %) 并保留单位。

由于 CSS 中 / 可作为分隔符，因此除法运算要稍微注意以下情况。

p { font: 10px/8px; // 原生的CSS，不作为除法 $width: 1000px; width: $width/2; // 使用了变量, 作为除法 width: round(1.5)/2; // 使用了函数, 作为除法 height: (500px/2); // 使用了括号, 作为除法 margin-left: 5px + 8px/2px; // 使用了 +, 作为除法 font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。 }

CSS

p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; }

注释

单行注释 // 会在 .scss 被编译成 .css 后移除。

SCSS

// Header .header { height: 60px; }

CSS

.header { height: 60px; }

多行注释 /* */ 会在 .scss 被编译成 .css 后保留。

编译

假设项目目录下有 css 和 scss 文件夹，运行以下命令会持续观察文件变化并即时编译。

$ node-sass --watch --recursive --output css scss

以下命令具有同等功能，而且更短。

$ node-sass -wro css scss

在终端按 Control + C 停止编译。