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步：

1. 安装Ruby，sass程序基于Ruby所以需要先安装Ruby
2. 安装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

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"。

index.scss文件中导入index2.scss文件

#index.scss文件$color:yellow;$font:18px;$background:red;@import 'index2.scss';body { color:$color; background:$background; font-size:$font; width: $width; height:$height;}

#index2.scss文件$width:100px;$height:100px;body{ font-family:"Times New Roman",Georgia,Serif;}

/*生成后的index.css文件*/body{ font-family:"Times New Roman",Georgia,Serif}body{ color:#ff0; background:red; font-size:18px; width:100px; height:100px}/*# sourceMappingURL=index.css.map */

用法：可以在被引入的文件中定义默认值，主文件@import这个文件后，如果主文件中变量有定义，就不会被覆盖。

sass入门用法

语法与注释

Sass中的注释有3种：//我是单行注释不会出现在编译之后任何格式的CSS文件中。/*我是多行注释*/只会出现在编译之后代码格式为expanded的CSS文件中。/*!我是强制注释*/会出现在任何代码格式的CSS文件中。

//使用大括号的方式布局，类似于cssbody { color:red; background:#fff;}div{ }

变量和嵌套

变量是Sass中最基本的语法。凡是css属性的标准值(比如说1px或者bold)可存在的地方，都可以替换为变量。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。 通过 $ 符号来定义，通过变量名称实现多处重复引用。(注：变量名中连字符和下划线等效，$primary_color 与 $primary-color是同一个变量)

$color:yellow; //定义变量$font:18px; //定义变量$background:red; //定义变量body { $width:180px; //定义局部变量 $header-color: orange !global; //可以在选择器中使用 !global 标志定义全局变量。 color:$color; //引用变量 background:$background; //引用变量 font-size:$font; //引用变量 border:1px solid $color; //多个属性值时引用变量 width:$width; //引用变量}div{ color:$header-color;}//编译成css文件body { color:yellow; background:red; font-size:18px; border:1px solid yellow; width:180px;}div{ color:orange;}

sass可以嵌套设置样式，这样比css方便了很多：

div{ p{ color:$color; a{ font-size:$font; } } span{font-size:$font;}}//编译成css文件div p{color:yellow;}div p a{font-size:18px;}div span{font-size:18px;}

大多数情况下上面那种简单的嵌套都没问题。但如果你想要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符：

div { p { margin-bottom: 1.4px; &:hover { color: #999; } }}//编译成css文件div p { margin-bottom: 1.4px; }div p:hover { color: #999; }

操作符

Sass操作符(或运算符)包括加法、减法、除法、等号操作符等。

等号操作符

所有数据类型都支持等号运算符：

==等于!=不等于

除了等号运算符之外，每种数据类型还支持各自的一组操作符。

数字操作符

SassScript支持以下标准的算术操作符:

+加-减*乘/除%取模

算术运算符的一个常见用法是宽度计算。

例如，下面的例子计算宽度百分比：

.container {  width: 100%; }article { float: left; width: 700px / 960px * 100%;}.sidebar { float: right; width: 200px / 960px * 100%;}

经过编译输出以下CSS代码：

.container { width: 100%; }article { float: left; width: 72.91667%; }.sidebar { float: right; width: 20.83333%; }

使用算术操作符时，参与运算的数据单位必须相同。否则会报错(例如，一个用px，另一个用em)：

 .box-big { font-size: 22px + 4em; // Error: Incompatible units: 'em' and 'px'. width: 30% - 20px; // Error: Incompatible units: 'px' and '%'. }

颜色操作符

算术操作符也适用于颜色。计算颜色时，参与运算的是R, G, B分量，而不是整个六位数颜色值。

例如，当把两个十六进制颜色值相加时，将依次把每一对分量值相加。

示例：

body { color: #991100 + #002299;}

经过编译输出以下CSS代码：

body { color: #993399; }

还可以对颜色和数字应用运算符。例如

body { color: #112233 * 2;}

经过编译输出以下CSS代码：

body { color: #224466; }

写到这里，无不感慨sass的强大以及技术发展的迅速。到这里入门sass也绰绰有余了。后续会有进阶文章继续！