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提供四个编译风格的选项：（四种编译排版演示链接上方官方文档）

• nested：      嵌套缩进的css代码，它是默认值。
• expanded： 没有缩进的、扩展的css代码。
• compact：   简洁格式的css代码。
• compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项：

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中的属性值的写法基本一样。