Sass循序渐进（1）安装、启动指令和配置

初衷

总是会照猫画虎的写一些.scss文件的代码，今天抽出时间从头到尾阅读sass官网，精炼了一些重要内容，也给自己日后提供一个查阅的词典，文章会尽可能精炼文本，一些不常用的功能需要读者自己去baidu。
全文摘自：https://www.sass.hk/

---

sass和scss

最开始还以为是两种不同的语言 - -
你可以理解为 scss = sass3.0
sass是一种单独的语言模式，虽然编译后是css文件，但sass的源码文件是无法像写css一样的；
而scss不同
.scss文件的编写可以和css完全一致，换句话说你把.css文件替换成.scss文件编译不会报错，而换成.sass文件就会报语法错误
也不用记那么麻烦，你就记住
sass是一种语言
文件后缀用.scss

---

安装

1. 安装ruby（官网下载，一种sass依赖的编译语言，安装时需要添加到环境变量）

2. gem替换源（相当于npm变成cnpm，访问更快）

   //删除替换原gem源
   gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

3. 常用命令

   //更新sass
   gem update sass

编译

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

编译配置

//编译格式 --style后跟样式名称
sass --watch input.scss:output.css --style compact

//编译添加调试map sourcemap可以理解为映射文件，便于在生产环境调试编译后的代码时，可以看到源文件；
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

编排格式说明 --style [XXX]

一个选择器 + 它的样式称为 样式语句块

• --style compact （默认）每个样式语句块占据独立一行
• --style nested （开发用）保留缩进
• --style expanded （开发用）和我们日常写css一个风格
• --style compressed （生产用）全部压缩为一行展示