Sass入门教程 _Sass

SASS（Syntactically Awesome Stylesheet）是一个css预处理器，有助于减少CSS的重复，节省时间。它是更稳定和强大的CSS扩展语言描述文档的风格结构。sass中文网
而且Sass算是CSS的超集，它100%兼容CSS的语法，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。换个说法也就是：如果你喜欢，可以在Sass文件中完全以CSS的语法来写代码，它也是完全支持的。
SASS程序有3种使用方式：
作为命令行工具作为独立的Ruby模块作为任何Rack-enabled的框架(包括Ruby on Rails和Merb)的插件Sass安装
Sass的安装分为2步：

安装Ruby，sass程序基于Ruby所以需要先安装Ruby
安装Sass程序

安装Ruby
从Ruby官网下载对应你电脑版本的安装包，然后按照步骤一步一步安装到你的电脑上（安装过程中记得勾选Add Ruby executablesto your PATH，免去安装后再去配置的烦恼）。完成安装后，在你的命令行程序中输入 ruby -v验证是否安装成功：
ruby -v #验证版本号#ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32] 如果出现对应的版本号说明安装成功，那么你就可以进行下面的操作了。
安装Sass
安装完Ruby后，打开命令行工具，输入以下命令安装sass程序：
gem install sass #gem是Ruby命令sass -v #验证sass是否安装成功如果打印出版本号，说明我们安装成功！
上述是一种官方安装的方法，有时候官方提供的安装方式可能是最简洁的，但也有可能不是最快速的，所以下面介绍另外一种镜像安装，速度会相对快一些：
gem sources --remove #移除自带源gem sources -a https://gems.ruby-china.org/ #安装RubyChina的源gem sources -l #查看当前的源gem install sasssass -v Sass编译
所有准备工作完成后，就可以开始sass的编译。
编辑sass文件
打开编辑器，首先创建一个index.scss文件，然后保存好，内容如下：
index.scss文件
$color:yellow;$font:18px;$background:red;body { color:$color; background:$background; font-size:$font;}生成css文件（命令行版）
打开命令行工具，切换到index.scss文件所在目录，执行以下命令：
sass index.scss index.css#把名为index的Sass文件转换为CSS文件。#每次有更新保存之后，都需要执行这个命令。为了更方便操作，我们可以监听这个文件，然后就省去了每次保存都要重新生成的麻烦。
sass --watch index.scss:index.css#`--watch`参数加上之后，可以监测index这个文件的变化，更新保存之后自动编译。多文件（文件夹）监听命令：
sass --watch sass/main:dist/css#监视sass目录下main文件夹中的所有Sass文件，并自动编译为CSS文件之后，放到dist/css目录下。逆向操作，css文件转换为sass/scss文件：
sass-convert index.css index.sasssass-convert index.css index.scss生成css文件（编辑器版）
有些人可能就觉得上面的命令操作有些繁琐，有没有更简便的方法呢，答案是肯定的，毕竟能人太多。我们可以通过编辑器插件的方式，自动编译成css文件。
作为一个前端开发，我经常用到的编辑器就是sublime text，然而sublime中就有两个比较好用的sass编辑插件：Sass（Sass语法高亮）和Sass Build（编译）。非常之好用。如果不知道具体的插件安装方法，请自行百度，节约时间，就是在珍惜生命！
完成好scss文件后，保存，快捷键Ctrl+B，就会在同一个文件夹里面生成对应的css文件和css.map文件。是不是省略了很多麻烦（就是这么任性）。
编译结果
上面两种方式都可以生成对应的css文件，生成的css文件如下：
index.css
【Sass入门教程】body{ color:#ff0; background:red; font-size:18px}/*# sourceMAppingURL=index.css.map */可以看到生成的css文件只包含CSS代码，Sass源文件中设置的变量已经被处理了。
/*# sourceMappingURL=styles.css.map */`表示映射文件是styles.css.map，映射文件记录了源文件到css文件的映射信息。
sass@import导入
sass提供导入机制，可以将页面的共用较为通用的scss提取出来，这样方便维护，其他页面按需导入相关的scss文件，避免了所有的样式都在一个样式文件中，一个样式文件较为繁重难以维护。
scss文件中引入scss文件
css3的@import，在css样式表之中使用绝对或相对地址指定导入的外部样式表文件。如：@import url("style/index.css")；css3中的@import可能会造成延迟加载，有的地方没有样式。
sass @import解决了这个问题，它能将多个scss合并为一个。如：@import "index.scss" 。