简介:
Sass是一种CSS扩展语言,它添加了诸如变量,嵌套,mixin等功能。Sass(和其他预处理器,例如Less)可帮助开发人员编写可维护的DRY(Don’t Repeat Yourself)代码
Sass有两种不同的语法选项可供选择。SCSS,其语法与CSS相同,但具有Sass的附加功能。或Sass(原始语法),它使用缩进而不是花括号和分号。本教程是使用SCSS编写的。
如果您已经熟悉CSS3,则可以相对较快地使用Sass。它没有提供任何新的样式属性,而是提供了更有效地编写CSS并使维护更加容易的工具。
首先使用npm包管理工具下载sass,执行
npm install sass -D
在本地目的下载sass,编写后缀名为.scss
的文件,使用命令sass input.scss output.css
将会把Sass
文件input.scss
编译输出为output.css
你还可以利用
--watch
参数来监视单个文件或目录。--watch
参数告诉Sass
监听源文件的变化, 并在每次保存Sass
文件时重新编译为CSS
。如果你只是想监视 (而不是手动构建)input.scss
文件,你只需在sass
命令后面添加--watch
参数即可,如下:sass --watch input.scss output.css
可以使用文件夹路径作为输入和输出, 并使用冒号分隔它们,来监听文件并输出到目录。例如:sass --watch app/sass:public/stylesheets
Sass 将会监听 app/sass 目录下所有文件的变动,并 编译 CSS 到 public/stylesheets 目录下