[TOC] **** # Sass 介绍 英文官网：http://sass-lang.com/ 中文官网：https://www.sasscss.com/sass-guidelines/ 因为你已经使用了 Node.js 来运行 Gulp 或 Grunt 和 PostCSS，所以使用 Sass 最简单的方法就是使用`LibSass`。**而且LibSass编译速度也要比Ruby Sass快很多**。在下面的教程中，将通过`gulp-sass`模块来部署LibSass。 ## 在线书写 [SassMeister | The Sass Playground!](https://www.sassmeister.com/) [an online Playground for Sass.js](http://sass.js.org/) ## RubyGems （gems） RubyGems（简称 gems）是一个用于对 Ruby组件进行打包的 Ruby 打包系统。 它提供一个分发 Ruby 程序和库的标准格式，还提供一个管理程序包安装的工具。 其包含包信息，以及用于安装的文件。 Gem通常是依照`.gemspec`文件构建的，包含了有关Gem信息的YAML文件。 Ruby代码也可以直接建立Gem，这种情况下通常利用Rake来进行。 RubyGems 旨在方便地管理 gem 安装的工具，以及用于分发 gem 的服务器。 RubyGems 大约创建于2003年11月，从Ruby 1.9版起成为Ruby标准库的一部分。 如果你的 Ruby 低于 1.9 版本，也可以通过手动安装: 首先下载安装包：https://rubygems.org/pages/download 。 解压并进入目录，执行命令： ~~~ ruby setup.rb ~~~ ## 更新 RubyGems 命令： ~~~ $ gem update --system # 需要管理员或root用户 ~~~ ## gem命令 `gem`命令用于构建、上传、下载以及安装Gem包。 ## gem用法 RubyGems 在功能上与 Python 的 `pip`、Ubuntu 下的`apt-get`、Centos 的 `yum` 、`portage`和 `npm `非常相似。 # 教程 ## `@import` 导入: sass的导入(`@import`)规则和 CSS 的有所不同，编译时会将`@import`的 scss 文件合并进来只生成一个 CSS 文件。 但是如果你在 sass 文件中，导入时有以下情况： 1. 导入 css 文件如`@import 'reset.css'` 2. 文件名以 http 开头； 3. 文件名 是 url()； 4. 带有任何媒体查询（screen，media queries） 那效果**跟普通CSS导入样式文件一样**，导入的css文件不会合并到编译后的文件中，而是以`@import`方式存在。 所有的sass导入文件都可以忽略后缀名`.scss`。一般来说基础的文件命名方法以`_`开头，如`_mixin.scss`(不会被编译出单独文件）这种文件在导入的时候可以不写下划线，可写成`@import "mixin"`。 ## 注释 sass有两种注释方式，一种是标准的css注释方式`/* */`，另一种则是`//`双斜杆形式的单行注释，不过这种单行注释不会被转译出来。 ## 变量 sass的变量必须是`$`开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号 `:` 分隔开（就像 CSS 属性设置一样），如果值后面加上`!default`则表示默认值。 sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。 # 其他实现 ## [LibSass](https://github.com/sass/libsass) libsass 是一个用 C 语言实现的 Sass 解析器。特点是简单、速度快而且易于集成。 ## [node-sass](https://github.com/sass/node-sass) node-sass 是绑定了 libsass 的为 node.js 实现的 库，可以极快的自动将 `.scss` 文件编译为 `.css` 文件。 ## [gulp-sass](https://github.com/dlmanning/gulp-sass) 轻巧的包裹了 `node-sass` 来实现相应的功能，如果使用时你遇到问题，那么问题可能来自：`libsass`或者`Sass`。 ## [Susy](http://oddbird.net/susy/) Susy 是一款用来为网站创建栅格布局的工具，它所带来的灵活和洒脱超乎想象。无论是 5 列，14 列，还是 48 列，一切都不是问题。不等宽列？So easy。 ## [precss](https://github.com/jonathantneal/precss) precss 囊括了许多插件来通过 PostCSS 支持类似 Sass 的特性，比如 CSS 变量，套嵌，mixins 等。 ## [scss-lint](https://github.com/brigade/scss-lint) 可配置的工具，用于编写干净和一致的SCSS # 工具 随着sass的发展也越来越成熟，以及autoprefixer这样的后处理的出现。好像也使得`compass`,`bourbon`这样的库地位越来越尴尬。而 `compass` 也早在2015年就停止了维护。 需不需要使用 `bourbon` 这样的工具库，每个人的需求也都不相同，大家可以自行选择。 ## [Compass](https://github.com/Compass/compass) `Sass`本身只是一个编译器，`Compass`在它的基础上，封装了一系列有用的模块和模板，补充`Sass`的功能。它们之间的关系，有点像`Javascript`和`jQuery`、`Ruby`和`Rails`、`python`和`Django`的关系。 对我来说，Compass一个最大的特性是，解决了浏览器前缀的问题。不用担心没输入浏览器前缀而引起的浏览器渲染问题。 （！！！已经停止维护） [Compass用法指南](http://www.ruanyifeng.com/blog/2012/11/compass.html) [Sass Frameworks: Compass or Bourbon?](https://www.sitepoint.com/compass-or-bourbon-sass-frameworks/) [我为什么不再用Compass写CSS（缺点分析）](http://ourjs.com/detail/54ed5397232227083e000035) ## Bourbon 类似于`compass`，[Bourbon](http://bourbon.io/) 是一个轻量级的`SASS mixin`库。官方介绍说`bourbon`有以下三个优势： * 没有第三方依赖，是纯净的sass * 文档简洁明了，清晰易读 * 轻量级 [bourbon使用](https://www.jianshu.com/p/667ecffec802) ## Bitters http://bitters.bourbon.io/ ## Susy http://susy.oddbird.net/ ## [jeet](http://jeet.gs/) ## Rucksack [Rucksack](https://github.com/seaneking/rucksack) 是一款有趣的CSS工具，让CSS的开发过程更加有趣了。Rucksack 是基于PostCSS构建的，模块化设计，没有冗余，运行起来飞快。将Rucksack融入到你的开发流程是很简单的，Rucksack对绝大多数的工具都有相应的插件。由于它是基于PostCSS来构建的，所以它同其他的CSS处理工具都能很好的兼容，甚至能够同Stylus直接协同。 [25 Essential Sass and Compass Tools](https://mashable.com/2013/06/11/sass-compass-tools/) codepen 上还有css有趣插件 # 编写规范 [编写稳健、可维护和可扩展的 Sass](https://sass-guidelin.es/zh/) [rscss 的中文翻译](https://github.com/suhaotian/rscss-zh-cn) 这篇文档适合有一定 sass 经验的人阅读 ：) # 参考 [sass在线玩耍](https://www.sassmeister.com/) [使用Susy构建Web布局更简单](http://cdn1.w3cplus.com/node/1509)