Sass教程

Sass世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目

Sass中文网：https://www.sass.hk/guide/

---

1. 特色功能 (Features)

• 完全兼容 CSS3
• 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令 (control directives)等高级功能
• 自定义输出格式

2. 语法格式 (Syntax)

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

3. 使用 Sass (Using Sass)

Sass 可以通过以下三种方式使用：作为命令行工具；作为独立的 Ruby 模块 (Ruby module)；或者作为 Rack-enabled 框架的插件（例如 Ruby on Rails 与 Merb）。无论哪种方式都需要先安装 Sass gem （Windows 系统需要先安装 Ruby）：

sass input.scss output.css//在命令行中运行 Sass

sass --watch input.scss:output.css//监视单个 Sass 文件，每次修改并保存时自动编译

sass --watch app/sass:public/stylesheets//监视整个文件夹

更多命令的用法请通过 sass --help 获取帮助。

在 Ruby 中使用 Sass 也非常容易，Sass gem 安装完毕后运行 require "sass" 然后按照下面的方法使用 Sass::Engine：

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }
"

---

安装Ruby

Sass的安装参考：https://www.sass.hk/install/

• sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
• window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统
• 安装完成后需测试安装有没有成功,运行CMD输入以下命令：

• ruby -v
  //如安装成功会打印
  ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
  

• 如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。
• （使用淘宝的gem源https://ruby.taobao.org/）如下：

  //1.删除原gem源
   gem sources --remove https://rubygems.org/
  
  //2.添加国内淘宝源
   gem sources -a https://ruby.taobao.org/
  
  //3.打印是否替换成功
   gem sources -l
  
  //4.更换成功后打印如下
   *** CURRENT SOURCES ***
   https://ruby.taobao.org/

---

安装Sass和Compass

Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

在每一个安装过程中，你都会看到如下输出：

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：

sass -v
 Sass 3.x.x (Selective Steve)

compass -v
 Compass 1.x.x (Polaris)
 Copyright (c) 2008-2015 Chris Eppstein
 Released under the MIT License.
 Compass is charityware.
 Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

如下sass常用更新、查看版本、sass命令帮助等命令：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass帮助
sass -h

---

Sass的特性

1. 声明变量$（可以使用-或者_下划线分割）

    $highlight-color: #F90;

2. 使用变量
3.  Sass的选择器和属性都可以嵌套
   特定样式嵌套& 比如：hover时或者父选择器嵌套body.ie
4. Sass支持多选择器
   群组选择器，子选择器> 同层选择器+ 和 ~
5.  使用@import导入sass文件
6. Sass兼容原生的css
7. Sass的注释
   比CSS多了一种静默注释  //…..，CSS的注释Sass编译之后会抹掉
8. Sass混合器（类似于html的单独的类）
   标识符定义采用@mixin

   @mixin rounded-corners {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px;
   }

   使用混合器采用@include

   notice {
     background-color: green;
     border: 2px solid #00aa00;
     @include rounded-corners;
   }

9. Sass的继承（类似于html的多类）
   Sass可以通过@extend进行继承，可以继承规则或者继承一个html元素的样式