笔记-sass基本命令

Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

scss语法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

sass安装(mac)

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个 ruby

gem install sass

升级sass版本的命令行为

gem update sass

卸载（删除）Sass

gem uninstall sass

查看sass版本的命令行为

sass -v

你也可以运行帮助命令行来查看你需要的命令

sass -h

sass编译

• 命令编译
• GUI工具编译
• 自动化编译

1.命令编译
单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

多文件编译：

sass sass/:css/

开启 “watch” 功能 (这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来)

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2.GUI 界面工具编译

推荐两款编译工具

• Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
• CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

3.自动化编译

• Grunt《Grunt-beginner前端自动化工具
• Gulp 中文网

不同样式风格的输出方法

1. 嵌套输出方式 nested

在编译的时候带上参数“ --style nested”:

sass --watch test.scss:test.css --style nested

2. 展开输出方式 expanded

在编译的时候带上参数“ --style expanded”:

sass --watch test.scss:test.css --style expanded

3. 紧凑输出方式 compact

sass --watch test.scss:test.css --style compact

在编译的时候带上参数“ --style compact”:

4. 压缩输出方式 compressed

在编译的时候带上参数“ --style compressed”:

sass --watch test.scss:test.css --style compressed