Sass简易指南

 

什么是Css预处理器？

 

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

 

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

 

CSS 预处理器语言：

- Sass（SCSS）

- LESS

- Stylus

- Turbine

- Swithch CSS

- CSS Cacheer

- DT CSS

 

什么是 Sass？

 

l  官方定义

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。

Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

 

l  Sass 前世今生

Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍 ）并不能被大众接受，不过由于其强大的功能和 Ruby on Rails 的大力推动，还是有很多开发者选择了 Sass。

 

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

 

l  为什么Sass早期不如 LESS 普及？

虽然缩进式风格可以有效缩减代码量，强制规范编码风格，但它一方面并不为大多数程序接受，另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早，但远不如 LESS 普及的原因。

 

l  Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

第一，文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

第二，语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

 

先来看一个示例：

 

Sass 语法

```

$font-stack: Helvetica, sans-serif //定义变量

$primary-color: #333 //定义变量

 

body

font: 100% $font-stack

color: $primary-color

```

Scss 语法

```

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

 

body {

font: 100% $font-stack;

color: $primary-color;

}

```

编译出来的 CSS

 

```

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

```

 

如何安装Sass(windows版)？

 

第一步：安装ruby

 

在 Windows 平台下安装 Ruby首先需要有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

 

Ruby 安装文件下载好后，按照应用软件安装步骤进行安装。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况），如下图所示：

 

当你的电脑安装好 Ruby 之后，接下来就可以安装 Sass 了。

虽然在windows下安装 Sass 有多种方法，但是这几种方法都是非常的简单，只需要在你的命令终端输入一行命令即可。当然最好首先进入ruby的命令行模式，如下图：

第二步：安装Sass

 

1、通过命令安装 Sass

打开ruby命令行，输入如下指令:

执行gem install sass命令。

2. 通过Compass安装Sass

除了使用 gem 命令来安装 Sass 之外，还可以通过安装 compass来安装 Sass，因为 Compass 是基于 Sass 开发的一个框架。也就是说，你安装了 Compass，也就同时安装好了 Sass。同样的在你的命令终端输入下面的命令：

执行gem install compass命令。

 

3. 通过淘宝镜像安装sass

除了下载 Sass 安装包到本地安装之外，碰到网络原因无法安装时还可以使用淘宝 RubyGems 镜像安装 Sass。只是我们需要通过 gem sources 命令来配置源，先移除默认的 https://rubygems.org 源，然后添加淘宝的源 https://ruby.taobao.org：

第一步：移除默认的源

gem sources --remove https://rubygems.org/

第二步：指定淘宝的源

gem sources -a https://ruby.taobao.org/

第三步：查看指定的源是不是淘宝源

gem sources -l

返回结果如下：

*** CURRENT SOURCES ***

https://ruby.taobao.org

请确保只有 ruby.taobao.org。如果无误之后，执行下面的命令：

gem install sass

第三步：查测及更新Sass

 

查测Sass

通过上面的几种方法都可以安装 Sass，但是，我们要如何确认自己是否安装成功了呢？其实很简单，只需要通过下面的命令即可：

sass -v

如果在你的命令终端能看到类似这样的信息就表示你的电脑安装已成功。也就是说可以正常的使用 Sass 了。

 

更新 Sass

维护 Sass 的团队会不断的为 Sass 添加新的功能，那么如何确保自己已安装的 Sass 也具有这些新的功能特性呢？不会是卸载了重新安装吧（虽然安装也就是一个命令的事情）？

 

其实不需要这么麻烦，只需要在命令终端执行gem update sass 命令，这个时候你看到类似下面这样的信息，表示你的 Sass 已更新到最新版本。

 

第四步：支持sass的开发环境设置

1. 让sublime支持sass的开发

在sublime中使用 ctrl+shift+p 打开 PackageControl，然后输入install 选择第一项 Install Package，最后输入sass 搜索sass的插件 安装 Sass和 Sass Build两个插件，如下图所示:

 

sass插件支持sass的语法高亮显示

sass build支持sass文件或者scss的自动编译，可以自动生成 css代码，编译快捷键ctrl+b

 

2. 使用Webstorm 可以直接支持sass的编写

 

Sass或者Scss文件的编写和编译

 

Sass 语法格式

这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。

 

来看一个 Sass 语法格式的简单示例。

 

假设我们有一段这样的 CSS 代码：

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

 

现在用 Sass 的语法格式来编写：

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

color: $primary-color

 

在整个 Sass 代码中，我们没看到类似 CSS 中的大括号和分号。

注：这种语法格式对于前端人员都不太容易接受，而且容易出错。

 

SCSS语法格式

SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

 

同样的这段 CSS 代码：

body {

 font: 100% Helvetica, sans-serif;

 color: #333; }

 

我们使用 SCSS 语法格式将按下面这样来书写：

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

 

body {

 font: 100% $font-stack;

 color: $primary-color;

}

 

这样的语法格式对于从事前端工作的同学来说更易于接受，这也是 SCSS 为什么更被前端人员青眯的原因。

 

不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展

名不同，来看一个简单的对比图：

正因为如此，有不少同学使用 Sass 新的语法规则，而文件扩展名依旧使用的是“.sass”，这也就造成血案了，编译时说编译不出来。

 

在此特别提醒新同学：“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。

特别注意：由于sass编译器的原因，在编写sass或者scss文件时一定要使用utf-8编码，还有文件路径中不能使用中文和特殊字符，否则在编译成css文件时会出错。如有同学想与作者咨询交流技术问题请加群523916260。