Sass指南：Sass前世此生和如何安装以及使用Webstorm直接支持编写

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。