Sass 是 Syntactically Awesome Style Sheets 的缩写，它是CSS的 一个开发工具，提供了很多便利和简单的语法，让CSS看起来更像是一门语言，这种特性也被称为“CSS预编译” 。它的主要涉及思想是让我们可以按照编程的思路编写自己的样式，然后通过“编译器”生成我们所需要的CSS文件。
官网
Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass，两者不同之处有以下两点：
文件扩展名不同。
Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；
语法书写方式不同。
Sass 是以严格的缩进式语法规则来书写，不带大括号“{}”和分号“；”，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
PS：本文只讨论 SCSS。
SCSS 与 Sass 异同 - Sass 中文文档
“LESS 要靠 JavaScript 解析，我不喜欢这种做法。另外，LESS 的变量用 @ 表示，我也不太习惯。” by 阮一峰
SASS用法指南 - 阮一峰
Sass、LESS 和 Stylus 简单对比
三者都是开源项目；
Sass 诞生是最早也是最成熟的 CSS 预处理器，有 Ruby 社区和 Compass 支持；Stylus 是早期服务器 NodeJS 项目，在该社区得到一定支持者；Less 出现于2009年，支持者远超远于 Ruby 和NodeJS社区；
Sass 和 LESS 语法较为严谨、严密，而Stylus语法相对散漫，其中 LESS 学习起来更快一些，因为他更像CSS的标准；
Sass 和 LESS 相互影响较大，其中 Sass 受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS；
Sass 和 LESS 都有第三方工具提供转译，特别是 Sass 和 Compass 是绝配；
Sass、LESS 和 Style 都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性，而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”成为五大基本特性，各自特性实现功能基本形似，只是使用规则上有所不同；
Sass 和 Stylus 具有类似于语言处理的能力，比如说条件语句、循环语句，而 LESS 需要通过 When 等关键词模拟这些功能，在这一方面略逊一筹。
CSS 预处理的缺点
个人感觉CSS 预处理器语言那是程序员的玩具，想通过编程的方式跨界解决 CSS 的问题。可以说 CSS 应该面临的问题一个也少不了，只是增加了一个编译过程而已，简单来说 CSS 预处理器语言较 CSS 玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。
CSS预处理器——Sass、LESS和Stylus实践【未删减版】 - W3CPlus - 2013-03-13
我选择 Sass 的原因：
Sass也是成熟的 CSS 预处理器之一，而且又有一个稳定，强大的团队在维护；
Sass对于我来说参考的教程多；
Sass有一些成熟稳定的框架，特别是 Compass，新秀还有 Foundation 之类；
还有一个原因是国外讨论 Sass 的同行要多于 LESS。
出于这几个原因，我想我学习或者使用 Sass 更容易一些，碰到问题更有参考资料，更有朋友帮忙解决。
该使用 SASS 还是 LESS？ - 大漠 - 知乎 - 2014-07-04
Sass 是 Ruby 语言写的，但是两者的语法没有关系。不懂 Ruby，照样使用。不过必须要先安装 Ruby，然后再安装 Sass。
先从官网下载并安装 ruby，在安装的时候，请勾选 Add Ruby executables to your PATH 这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到 ruby 环境。
Downloads - 官网
安装完 ruby 之后，在开始菜单，找到刚才安装的 ruby，打开Start Command Prompt with Ruby
然后直接在命令行输入：
gem install sass
按回车键确认，等待一段时间就会提示你 Sass 安装成功（如果因为墙的原因安装失败，请参考下面用淘宝 RubyGems 镜像安装 Sass）。
由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。
这时候我们可以通过source命令来配置源，先移除默认的https://rubygems.org源：
gem source --remove https://rubygems.org/
然后添加淘宝的源https://ruby.taobao.org/:
gem source -a https://ruby.taobao.org/
然后查看一下当前使用的源是哪个，如果是淘宝的，则比表示可以输入 Sass 安装命令gem install sass了。
最后使用版本查看命令确保安装成功：
sass -v
Sass 安装 - W3CPlus
SASS 文件就是普通的文本文件，里面可以直接使用 CSS 语法。文件后缀名是 .scss，意思为 Sassy CSS。
新建一个 test.scss 文件，内容为：
$blue : #1875e7;div{ color: $blue;}然后在命令行输入下面命令，屏幕上便显示 .scss 文件转化的 css 代码：
sass test.scss
如果要将显示结果保存成文件，后面再跟一个 .css 文件名：
sass test.scss test.css
那么就会默认在当前目录下生成文件。
Sass 提供四个编译风格的选项：
nested: 嵌套缩进的css代码，它是默认值；
expanded: 没有缩进的、扩展的css代码；
compact: 简洁格式的css代码；
compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.scss test.min.css
你还可以让 Sass 监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// 监听文件// input.scss : scss文件// output.css : 编译后的css文件sass --watch input.scss:output.css// 监听目录 // sassFileDirectory : sass文件目录// cssFileDirectory : 编译后的css文件目录sass --watch sassFileDirectory:cssFileDirectory
Sass 编译 - W3CPlus
Sass 的官方网站还提供一个在线转换器，方便尝试运行各种栗子：
SassMeister | The Sass Playground！
Sass 中可以定义变量，方便统一修改和维护。
//sass style//-----------------------------------$gray: #666;body { background-color: $gray;}//css style//-----------------------------------body { background-color: #666; }Sass 可以进行选择器的嵌套，表示层级关系。
//sass style//-----------------------------------ul { li { display: inline-block; }}//css style//-----------------------------------ul li { display: inline-block; }Sass 中如导入其它sass文件，最后编译为一个css文件，优于纯css的@import。
//sass style//-----------------------------------// reset.scsshtml,body,ul,ol { margin: 0; padding: 0;}//sass style//-----------------------------------// test.scss@import 'reset';body { font-size: 100%; background-color: #efefef;}//css style//-----------------------------------html,body,ul,ol { margin: 0; padding: 0; }body { font-size: 100%; background-color: #efefef; }Sass 中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理 CSS 3 的前缀兼容轻松便捷。
//sass style//-----------------------------------@mixin box-sizing ($sizing) { -webkit-box-sizing: $sizing; -moz-box-sizing: $sizing; -box-sizing: $sizing;}.box-border { border: 1px solid #ccc; @include box-sizing(border-box);}//css style//-----------------------------------.box-border { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -box-sizing: border-box; }Sass 可通过 @extend 来实现代码组合声明，使代码更加优越简洁。
//sass style//-----------------------------------.bar-left { border: 1px solid #ccc;}.bar-right { @extend .bar-left; color: #999;}//css style//-----------------------------------.bar-left, .bar-right { border: 1px solid #ccc; }.bar-right { color: #999; }Sass 可进行简单的加减乘除运算等。
//sass style//-----------------------------------$defaultFontSize: 10px;.msg { position: absolute; top: (800px/2); left: 200px + 200px; font-size: $defaultFontSize * 2;}//css style//-----------------------------------.msg { position: absolute; top: 400px; left: 400px; font-size: 20px; }Sass 中集成了大量的颜色函数，让变换颜色更加简单。
//sass style//-----------------------------------$linkColor: #08c;a { text-decoration: none; color: $linkColor; &:hover { color: darken($linkColor, 10%); }}//css style//-----------------------------------a { text-decoration: none; color: #08c; }a:hover { color: #006699; }Sass 共有两种注释风格。
标准的 CSS 注释 /* comment */，会保留到编译后的文件
单行注释 // comment，只保留在 SASS 源文件中，编译后会被省略。
提示：在/*后面加一个感叹号，表示这是“重要注释”。即使是压缩模式编译，也会保留这行注释。通常可以用于声明版权。
/*! 重要注释！*/
CSS 预处理器的特点之一是可以把你的代码分割成很多文件，而且不会影响性能。这都归功于 Sass 的@import命令，只要在你的开发环境下，你调用不管多少文件，最终将编译出一个 CSS 样式文件。
管理 Sass 项目文件结构 - 大漠 - W3CPlus
gulp-ruby-sass 是调用 sass，所以需要 ruby 环境，需要生成临时目录和临时文件；
gulp-sass 是调用 node-sass，有 node.js 环境就够了，编译过程不需要临时目录和文件，直接通过 buffer 内容转换。
gulp-ruby-sass与gulp-sass - SegmentFault
sass入门 - sass教程
sass|博客自由标签|W3CPlus
Sass->十分钟写一个Sass组件 - SegmentFault
使用Sass来写OOCSS - SegmentFault
以上，欢迎拍砖斧正。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
