Sass简介安装编译语法

一、sass简介

CSS作为层叠样式表，是一种静态语言。CSS不是一个编程语言，我们可以用它来开发网页样式，但是没有办法用它进行编程。但SASS的出现，让CSS实现了通过代码编程来实现的方式。

SASS是一种CSS开发工具，提供了许多便利的写法，让CSS的处理实现了可编程处理。

SASS扩展了CSS3，增加了规则、变量、混入、选择器、继承等等特性，可以生成风格良好的CSS样式表文件，易于组织和维护。

二、sass安装

官方文章：sass中文网安装

查看版本信息，下图说明安装成功：

安装流程：

1、安装Ruby。sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby，安装过程中请注意勾选 Add Ruby executables to your PATH 添加到系统环境变量。（注:mac下自带Ruby无需在安装Ruby!）

2、终端测试安装是否成功：ruby -v

3、如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断，因此我们需要更换gem源，更换成国内服务器上的。

//1.删除并替换原gem源
 gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org///2.打印是否替换成功，该命令可以查看gem源
 gem sources -l
 结果打印：https://gems.ruby-china.com      （ 确保只有 gems.ruby-china.com ）
 

4、安装sass：gem install sass 接着执行 gem install compass
安装完成之后，通过运行下面的命令来确认应用已经正确地安装到了电脑中（例如）：

sass -v
 结果打印：Sass 3.x.x (Selective Steve)compass -v
 结果打印：Compass 1.x.x (Polaris)
 

5、sass更新、查看版本、sass命令帮助：

//更新sass
 gem update sass//查看sass版本
 sass -v//查看sass帮助
 sass -h
 

注意：Compass是Sass的工具库（toolkit）。

   Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能

参考文档：sass-compass之一

三、sass编译

参考文档：SASS用法指南 阮一峰

官方文档：编译sass sass中文网

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

SASS文件的后缀名有两种方式，.sass要求更严谨规范的语法不需要分号和大括号，而.scss可以有分号和大括号使用起来更简便。

所以我们一般使用.scss文件。

1、命令行编译：

//在屏幕上显示.scss文件转化的css代码（假设文件名为output）
 sass test.scss//单文件转换命令
 sass input.scss output.css//单文件监听命令（一旦源文件有变动，就自动生成编译后的版本）
 sass --watch input.scss:output.css//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
 sass --watch app/sass:public/stylesheets
 

2、SASS提供四个编译风格的选项：（四种编译排版演示链接上方官方文档）

生产环境当中，一般使用最后一个选项：sass --style compressed test.sass test.css
　　
选择编译格式并添加调试map：
sass --watch input.scss:output.css --style compressed --sourcemap

–style表示解析后的css是什么排版格式；
–sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
另外还有一个 --debug-info，开启debug信息，不常用。

3、其他编译方式： 软件编译，比如koala&codekit、Live Sass编译器（VSCode扩展）
有篇文章：Visual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS

四、语法

官方文档1：Sass中文网 快速入门
官方文档2：Sass中文网 中文文档

简单使用：阮一峰的网络日志

另附语：
@charset "utf-8"  //sass文件里，想要写中文必须加字符集 “utf-8” 声明，不然会报错。
sass文件中，变量的赋值只是单纯的文本替换，跟css中的属性值的写法基本一样。