Sass入门（一）

Sass入门（慕课）
阮一峰

CSS 预处理器

为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”。例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性。

Sass 和 SCSS 有什么区别？

初步感觉，本质上没区别。
还是要说的话：
后缀不一样
书写方式不一样。SCSS带大括号,带分号。而Sass 是以严格的缩进式语法规则来书写，不带有大括号和分号（延续 Ruby 的书写规范）。（想起某大牛的话，编写语言的人想让前端变简单点，前端自己非要给自己加大括号）

安装

（有钱了第一件事买mac ==）

• 先装 Ruby
• 再装 Sass

gem install sass  
sudo gem install sass   (mac)

确认自己是否成功安装 Sass

sass -v

更新 Sass

gem update sass

卸载（删除）Sass

gem uninstall sass

Sass 编译（命令行）

• 单文件编译

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

• 多文件编译

sass sass/:css/

表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

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

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

四种编译风格

• 嵌套输出方式 nested
• 展开输出方式 expanded
• 紧凑输出方式 compact
• 压缩输出方式 compressed

生产环境下最好用 compressed

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