CSS 强化装备！Sass 安装与使用

Sass 是什么？

Sass 是 Syntactically Awesome Style Sheets 的缩写，它是CSS的 一个开发工具，提供了不少便利和简单的语法，让CSS看起来更像是一门语言，这种特性也被称为“CSS预编译” 。它的主要涉及思想是让咱们能够按照编程的思路编写本身的样式，而后经过“编译器”生成咱们所须要的CSS文件。

官网

Sass 和 SCSS 有什么区别？

Sass 和 Scss 实际上是同一种东西，咱们平时都称之为 Sass，二者不一样之处有如下两点：

1. 文件扩展名不一样。
   Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；

2. 语法书写方式不一样。
   Sass 是以严格的缩进式语法规则来书写，不带大括号“{}”和分号“；”，而 SCSS 的语法书写和咱们的 CSS 语法书写方式很是相似。

PS：本文只讨论 SCSS。

SCSS 与 Sass 异同 - 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 的缘由：

1. Sass也是成熟的 CSS 预处理器之一，并且又有一个稳定，强大的团队在维护；

2. Sass对于我来讲参考的教程多；

3. Sass有一些成熟稳定的框架，特别是 Compass，新秀还有 Foundation 之类；

4. 还有一个缘由是国外讨论 Sass 的同行要多于 LESS。

出于这几个缘由，我想我学习或者使用 Sass 更容易一些，碰到问题更有参考资料，更有朋友帮忙解决。

该使用 SASS 仍是 LESS？ - 大漠 - 知乎 - 2014-07-04

安装

Sass 是 Ruby 语言写的，可是二者的语法没有关系。不懂 Ruby，照样使用。不过必需要先安装 Ruby，而后再安装 Sass。

ruby 安装

先从官网下载并安装 ruby，在安装的时候，请勾选 Add Ruby executables to your PATH 这个选项，添加环境变量，否则之后使用编译软件的时候会提示找不到 ruby 环境。

Downloads - 官网

sass 安装

安装完 ruby 以后，在开始菜单，找到刚才安装的 ruby，打开Start Command Prompt with Ruby

而后直接在命令行输入：

gem install sass

按回车键确认，等待一段时间就会提示你 Sass 安装成功（若是由于墙的缘由安装失败，请参考下面用淘宝 RubyGems 镜像安装 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！

基本语法

1.变量

Sass 中能够定义变量，方便统一修改和维护。

//sass style
//-----------------------------------
$gray: #666;
body {
  background-color: $gray;
}

//css style
//-----------------------------------
body {
  background-color: #666; 
}

2.嵌套

Sass 能够进行选择器的嵌套，表示层级关系。

//sass style
//-----------------------------------
ul {    
    li {
        display: inline-block;
    }
}

//css style
//-----------------------------------
ul li {
  display: inline-block; 
}

3.导入

Sass 中如导入其它sass文件，最后编译为一个css文件，优于纯css的@import。

//sass style
//-----------------------------------
// reset.scss
html,
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; 
}

4.mixin

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; 
}

5.扩展/继承

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; 
}

6.运算

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; 
}

7.颜色

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; 
}

8.注释

Sass 共有两种注释风格。

• 标准的 CSS 注释 /* comment */，会保留到编译后的文件

• 单行注释 // comment，只保留在 SASS 源文件中，编译后会被省略。

提示：在/*后面加一个感叹号，表示这是“重要注释”。即便是压缩模式编译，也会保留这行注释。一般能够用于声明版权。

/*!
    重要注释！
*/

管理Sass项目文件结构

CSS 预处理器的特色之一是能够把你的代码分割成不少文件，并且不会影响性能。这都归功于 Sass 的@import命令，只要在你的开发环境下，你调用无论多少文件，最终将编译出一个 CSS 样式文件。

管理 Sass 项目文件结构 - 大漠 - W3CPlus

gulp-ruby-sass 与 gulp-sass

• gulp-ruby-sass 是调用 sass，因此须要 ruby 环境，须要生成临时目录和临时文件；

• gulp-sass 是调用 node-sass，有 node.js 环境就够了，编译过程不须要临时目录和文件，直接经过 buffer 内容转换。

gulp-ruby-sass与gulp-sass - SegmentFault

More

sass入门 - sass教程
sass|博客自由标签|W3CPlus
Sass->十分钟写一个Sass组件 - SegmentFault
使用Sass来写OOCSS - SegmentFault

以上，欢迎拍砖斧正。