Sass 入门与实战

**Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.**打开Sass官网就可以看见这样一句话。这话一点儿都不谦虚:Sass 世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言！他如此自信想必是有各种自信的理由，下面我们就一起来了解了解 Sass，看看它在吹牛还在真的如此厉害。

css 预处理器

学过CSS的人都知道，它不是一种编程语言。网页开发离不开它，但它有发展缓慢。自然而然就有想出了解决方案：css 预处理器

CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：

语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。

css 预处理器已发展多年，处理 Sass 外，还有less, Stylus…

除了 css 预处理器，css 后处理器也很流行如postcss

开始使用 Sass

完全兼容 CSS3
在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
对颜色和其它值进行操作的{Sass::Script::Functions 函数}
函数库控制指令之类的高级功能
良好的格式，可对输出格式进行定制
支持 Firebug

Sass 的两种语法

Sass 有两种语法。

第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。
第二种比较老的语法成为缩排语法（或者就称为 “Sass”），提供了一种更简洁的 CSS 书写方式。它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。

一般使用 Scss 多余 Sass，不过二者除了上述不同外，基本在无差别，也许你和我一样，有时候写写 Python 后会突然想用 Sass，有时有钟情于 Scss，这些都无关紧要

Sass 的安装

由于 Sass 的发展，Sass 有两种实现，ruby-sass 与 lib-sass，前者采用ruby实现，后者采用C/C++实现。

ruby-sass

你需要先安装 ruby，不过 mac 已经自带了。然后 gem install 安装

　gem install sass

在命令行中使用如下命令编译

sass [options] <input> [output]

通常你会出错，哈哈哈，如出错请自行搜索解决

node-sass

不用说你也得先安装 nodeJs，不过现在的前端你不安装个 node 都不好意意思说自己是前端。

npm install --save-dev node-sass

通常你还是会出错，哈哈哈，不过用 cnpm 代替 npm 就好*

cnpm install --save-dev node-sass

在命令行中使用如下命令编译

node-sass [options] <input> [output]

node-sass 还可以编辑 nodejs 文件进行配置编译

SASS 提供四个编译风格的选项

nested：嵌套缩进的 css 代码，它是默认值。
expanded：没有缩进的、扩展的 css 代码。
compact：简洁格式的 css 代码。
compressed：压缩后的 css 代码。

最后推荐大家使用 gulp 来编译 Sass。关于 gulp 这里不多讲。下面给出一个简单 gulp 配置文件来编译 sass

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'))
})

gulp.task('sass:watch', function () {
    gulp.watch('./sass/**/*.scss', ['sass'])
})

具体参见GitHub

下面我们将快速学习 sass 的语法

sass 语法快速入门

基本语法

1.变量

Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

//scss style
//-----------------------------------
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}
//css style
//-----------------------------------
body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

2.嵌套

sass 可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

//scss style
//-----------------------------------
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

//css style
//-----------------------------------
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3. 计算功能

SASS 允许在代码中使用算式：

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 80 * 10%;
}

4.颜色

sass 中集成了大量的颜色函数，让变换颜色更加简单。

//scss style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{ // &是父选择器的标识符
      color:darken($linkColor,10%);
    }
}

//css style
//-----------------------------------
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

&是父选择器的标识符

5. 注释

Sass 共有两种注释风格。

标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在 SASS 源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*! 
我是个傲娇的注释，不会被省略
*/

代码的重用

1. 导入

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

文件的名称约定以下划线开头
以下划线卡头的文件名称不会被编译

//scss style
//-----------------------------------
// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

//scss style
//-----------------------------------
// base.scss 

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

//css style
//-----------------------------------
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

2. 扩展/继承

sass 可通过@extend来实现代码组合声明，使代码更加优越简洁。

//scss style
//-----------------------------------
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

//css style
//-----------------------------------
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

3. mixin

sass 中可用 mixin 定义一些代码片段，且可传参数，方便日后根据需求调用。比如说处理 css3 浏览器前缀*(更好的解决方案：autoprefixer)*

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

mixin 的强大之处，在于可以指定参数和缺省值。

高级用法

高级用法可以翻译为“用的少”，但威力很大“

1.条件语句

@if可一个条件单独使用，也可以和@else结合多条件使用

//scss style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

2.循环语句

SASS 支持 for 循环：

for 循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i 表示变量，start 表示起始值，end 表示结束值，这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

也支持 while 循环：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

each 命令，作用与 for 类似：

语法为：@each $var in <list or map>。其中$var表示变量，而 list 和 map 表示 list 类型数据和 map 类型数据。sass 3.3.0 新加入了多字段循环和 map 数据循环。

//scss style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

了解了上面这些内容，基本上就算入门了，再去看看这些链接：

实战

传送门： GitHub

文章内容

sass 入门与实战