1. SASS是什么

SASS 是 CSS 的一个预处理工具，简单来说，它通过自己的一套语法规则来写源码，然后通过编译器，得到 CSS 代码。

为什么需要这东西呢？因为如果每天都要写很多的 CSS ，那么里面重复的内容会很多，同时，CSS 本身并没有相应的逻辑抽像工具，这就造成在项目中要对样式做有效的管理，似乎没有什么好办法了。

SASS 本身是来源于 Ruby 的一个项目，它目前的标准，应该是一个叫 libSass 的 C 语言库，有了这个 C 语言的实现之后，各种语言就可以很方便地 bind 过去了，从官网上的信息看，目前 C, Go, Java, Javascript, Lua, .NET, Node, Perl, PHP, Python, Ruby, Scala 这些语言上都有实现。

SASS 支持两种格式的源码写法，一种叫 SASS ，另一种叫 SCSS ，区别只是前者使用缩进，后者使用大括号。（我就不明白了，为什么有人喜欢大括号，你写了大括号不也要缩进么）

2. 安装

这里，使用 Node 上的实现，叫 node-sass ：

sudo npm install -g node-sass

安装之后，除了相应的 node 模块，还会有一个命令行可执行程序，叫 node-sass ：

node-sass a.sass

通过 --output-style 参数可以控制输出的 CSS 的格式，我喜欢用：

node-sass --output-style compact a.sass

这样输出的 CSS ，是一行一条。（以前喜欢这种形式，是因为一行一条的格式，可以方便地在编辑器中使用列编辑作批量修改）

3. 变量, 赋值, 数据类型

SASS 中使用 $ 开头来标识一个变量名，使用 : 完成赋值的操作：

$a: 123

数据类型有以下几种：

数字: 123 , 1.2 , 12px , 12%, 这些是数字类型。比较特殊的一点，可能在于， SASS 把带有 CSS 单位的标识也作为数字处理，在后面的运算符行为时，单位部分也会一并处理。

字符串: abc 或 "abc" 或 'abc' 。简单来说，单引号，双引号都可以，不要引号也可以。但是，因为 CSS 中大部分的描述都是不要引号的形式，比如 color: red ，而不是 color: 'red' ，所以，在引号的处理上，要小心。

颜色: red , #abcd , rgb(123,255,67) , rgba(123, 255, 67, 0.5) , CSS 中表示颜色的形式，在 SASS 中作为颜色类型处理。这里注意，第一个 red ，跟字符串的形式一样的。（我猜这类标识具有混合属性吧）

列表: 10px 2px 0 0 或 Helvtica, Arial, sans-serif ，以空格，或者以逗号分割的数据形式，为列表。主要对应于 CSS 中的对应形式，比如 margin: 10px 2px 0 0 ， font-family: Helvtica, Arial, sans-serif 。同时，列表这种类型，在处理函数的参数时也有用。

映射: (k1: v1, k2: v2) ，映射其实就是一个嵌套的列表，形如 (k1 v1), (k2 v2) ，主要用于迭代的一些控制结构中。

4. 变量符号化

这里的“符号化”说法，意思就是“行内求值”。简单来说，就是把变量的值，在任何地方，转换为语法结构的一部分（因为按语法规则，“这里”是不能使用变量的）。举一个例子：

$a cls

.$a:
    color: red

这肯定是错误的。因为 “规则” / “选择器” 部分，是不允许使用变量的。但是你可以：

$a cls

.#{$a}
    color: red

这样，就是正确的了，编译出来是：

.cls { color: red; }

同时，还有：

$a: 'red'

.cls
    color: $a

这样写，虽然编译没有问题，但是结果：

.cls { color: 'red'; }

这是不对的。换成：

$a: 'red'

.cls
    color: #{$a}

就可以正确得到：

.cls { color: red; }

所以， #{} 的功能，算是非常有用且强大。

5. 嵌套规则与引用

CSS 简单来说，只有两部分内容，一是规则，或者说选择器。二是属性描述。DOM 本身是一个层级结构，所以我们在书写规则时，也是层级下降的方式，这样，如果直接写 CSS ，就不可避免地要写很多重复的前置规则，比如：

.project > .header > .title { color: red; }
.project > .header > .content { color: blue; }

SASS 最直观的一个功能，就是可以以一种嵌套的层级形式，来处理规则的书写：

.project
    > .header
        > .title
            color: red
        > .content
            color: blue

这样不光可以少写很多代码，而且最重要的，是容易维护。

这种嵌套的层级结构，有一个特别的功能，就是使用 & 可以作为当前选择的引用，这个功能，一般用于伪类：

.project
  > .header
    > .title
      color: red
      
      > a
        color: yellow
        
        &:hover
          text-decoration: none

编译得到：

.project > .header > .title { color: red; }
.project > .header > .title > a { color: yellow; }
.project > .header > .title > a:hover { text-decoration: none; }

6. 运算符, 逻辑判断, 控制结构

SASS 虽然不是完整的一门编程语言，但是，运算符和控制结构的概念还是有的。

这里先说一下， SASS 中可以使用 @debug 作标准输出。

$a: 1px + 1px
$b: 1px * 20
$c: 10px - 2px
$d: 10px / 2
$e: 10 + 2 - 3 + 0px
$e2: 10 + 2 - 3 + 0%
$e3: (10 + 2) * 3 / 100 * 100%

@debug $a, $b, $c, $d, $e, $e2, $e3

四则运算时，单位需要匹配，或者，你也可以在最后再处理单位。

控制结构方面，目前有 @for, @each, @while, @if 。

@for

单纯的数字范围的迭代：

@for $i from 1 through 10
  @debug $i

@each

对列表的迭代：

@each $i in 1,2,3,4
  @debug $i

支持多值匹配：

@each $a, $b, $c in (a, b, c), (red, 1, blue)
  @debug $a, $b, $c

@while

$i: 0

@while $i < 10
  @debug $i
  $i: $i + 1

@if

这里随便把逻辑判断一起用了：

$i: 0

@while $i < 10
  @if $i == 0
    @debug zero

  @if $i > 2
    @debug gtwo
  @else
    @debug ltwo

  @if $i != 0
    @debug other

  $i: $i + 1

7. 函数定义

先说清楚这里的函数定义，传入参数，返回值，返回值。

@function add($a, $b)
  @return $a + $b

@debug add(1, 2)

函数的参数，跟 Python 一样，可以有默认值，可以有关键词参数：

默认值：

@function add($a, $b:3)
  @return $a + $b

@debug add(1)

关键词参数：

@function add($a:2, $b:3)
  @return $a + $b

@debug add($b:1)

8. @mixin, 宏

Mixin 是官方的叫的名字，宏是我自己叫的，因为，这东西的行为就像“宏”一样，可以生成代码片段。

Mixin 是 SASS 中地位很重要，还特别给它了一种简写形式。

@mixin em
  color: red

.header.em
  @include em

简写形式：

=em
  color: red

.header.em
  +em

生成：

.header.em { color: red; }

Mixin 也可以带参数：

=em-back($color:yellow, $font-size: 14px)
  color: red
  background-color: $color
  font-size: $font-size


.header.true
  +em-back($font-size: 20px)

生成：

.header.true { color: red; background-color: yellow; font-size: 20px; }

还可以直接传入代码块：

=em
  color: red
  @content


.header.true
  +em
    font-size: 14px

生成：

.header.true { color: red; font-size: 14px; }

注意， Mixin 的结果是代码块，所以，它不光可以返回属性块，还可以连带规则块一起处理：

=em
  span
    color: red

.header.true
  +em

生成：

.header.true span { color: red; }

引用 & 也可以照常使用：

=hover
  &:hover
    @content

.header.true
  color: white

  +hover
    color: red

生成：

.header.true { color: white; }
.header.true:hover { color: red; }

配合 @at-root 和 & ：

=hover
  @at-root
    &
      @content

.header.true
  color: white

  +hover
    color: red

生成：

.header.true { color: white; }
.header.true { color: red; }

Mixin 本身是可以嵌套的：

=em
  color: red

=hover
  +em
  @content

.header.true
  +hover
    background-color: aqua

生成：

.header.true { color: red; background-color: aqua; }

9. @extend 续写

前面说的 @mixin 是处理抽象的可复用代码，现在说的 @extend 是处理具体的已存在的可复用代码。其实两者的机制都是 Mixin ，这里说的 “续写” 是我自己叫的一个名字，因为我实在不想叫“继承”。

9.1. 最简单情况

@extend 的作用，是通过指定标识符，在当前块中引用对应的属性定义。

.a
  color: red

.b
  @extend .a
  background-color: blue

生成：

.a, .b { color: red; }
.b { background-color: blue; }

这里，你也可以看成是生成了：

.a { color: red; }
.b { color: red; }
.b { background-color: blue; }

或者：

.a { color: red; }
.b { color: red; background-color: blue; }

这里的行为，可以注意一点，用 @extend 的块自己本身一定还有一条定义，这里的就是最前面的 .b 有自己单独的一条。如果 .b 中没有 background-color ，也可以看成是 .b 会有两条相同的，仅有 color 的属性定义。

9.2. 复合规则

当然，这是最简单的情况，复杂一点的：

.g.a
  color: red

.b
  @extend .a
  background-color: blue

生成的是：

.g.a, .g.b { color: red; }
.b { background-color: blue; }

这里的行为，可以总结为， @extend 部分，不会更改原有的规则限制。这里就是 .a 有 .g 这个限制，那么引用 .a 的 .b ，在引用部分，也有 .g 的限制。

把 .a 换成 .g 的话：

.g.a
  color: red

.b
  @extend .g
  background-color: blue

那么生成的就是：

.g.a, .a.b { color: red; }
.b { background-color: blue; }

上面的例子，把 .g.a 换成 .g .a 结果相同。

这里的：

.g.a, .a.b { color: red; }

也可以看成是：

.g.a, .b.a { color: red; }

9.3. 伪类

伪类本身是一个限定，所以，如果碰到伪类的情况，就把它看成是一个普通类限定， @extend 就只是指定了一个复合条件而已。

先看复合条件的情况：

.g .x.y.z
  color: red

.m
  @extend .x.y

生成：

.g .x.y.z, .g .z.m { color: red; }

即：

.g .x.y.z, .g .m.z { color: red; }

伪类同样：

.g img.user:hover
  color: red

.b
  @extend img:hover

把 :hover 看成 .hover 就好了：

.g img.user:hover, .g .user.b { color: red; }

->

.g img.user:hover, .g .b.user { color: red; }

不过伪类一般会这么用吧：

.g img.user:hover
  color: red

.b
  &:hover
    @extend img:hover

生成：

.g img.user:hover, .g .user.b:hover { color: red; }

->

.g img.user:hover, .g .b.user:hover { color: red; }

9.4. 序列规则下的使用

前面的例子， @extend 所在的规则，本身都比较简单。最复杂的情况，就是 @extend 所在的规则是多重限定，并且 @extend 指定的条件是多重限定，同时，目标定义时，又有多重限定，最后，目标可能还有多个。

四个点， @extend 所在的块， @extend 本身， @extend 可能碰到的目标， @extend 可能碰到的多个目标。

当然，现实情况不会这样，太复杂了 SASS 自己也搞不定。所以， SASS 中， @extend 本身的规则，是不允许有“序列条件”的。

.x a
  color: red

.header > a
  @extend .x a

这种情况，不被允许。

@extend 本身简单了一点，但是情况还是有些伤脑筋：

.x > .side .m.a
  color: red

.y .m.a
  background-color: yellow

.header .title a
  @extend .m.a

当 @extend 的目标有多个时，我们一个一个来看就好了，先看 .x > .side .m.a 。

前面说过， @extend 不会改变原来的限定，所以， .x > .side 这个条件是不会变的。但是，这里的情况有些不一样，因为， @extend 所在的块，本身还有一个 .header .title 的前置限定条件。

那么现在的问题就是，对于 .header .title a 中的这个 a ，它有两组前置限定条件了。

这里的两组条件，其实跟前面是一回事。最开始的一条，就说了，别忘了在 @extend 所在的块本身，还会有一条定义生成。不同的是，这里 @extend 所在的块本身，会被附加限定条件。

所以，单看：

.x > .side .m.a
  color: red

.header .title a
  @extend .m.a

第一步：目标照写， .x > .side .m.a { color: red } 。
第二步：自己照写， .header .title .x > .side a { color: red } 。
第三步：目标 -> @extend， .x > .side .header .title a { color: red } 。

换作最简单情况的话：

.em
  color: red

.side .content
  @extend .em

第一步：目标照写， .em { color: red } 。
第二步：自己照写， .side .content { color: red } 。
第三步：目标 -> @extend， .side .content { color: red } 。

9.5. 总结

总结起来，对于：

[PRE_A] TARGET_A
    color: red

[PRE_B] TARGET_B
    @extend TARGET_A

结果就是：

[PRE_A] TARGET_A { color: red }
... TARGET_B { color: red }
... TARGET_B { color: red }
然后放 [PRE_A] [PRE_B] 和 [PRE_B] [PRE_A] 两种情况，得到：
[PRE_A] TARGET_A { color: red }
[PRE_A] [PRE_B] TARGET_B { color: red }
[PRE_B] [PRE_A] TARGET_B { color: red }

看之前的第二个目标实例：

.y .m.a
  background-color: yellow

.header .title a
  @extend .m.a

自然就是生成：

.y .m.a { background-color: yellow }
... a { background-color: yellow }
... a { background-color: yellow }

补充上：

.y .m.a { background-color: yellow }
.header .title .y a { background-color: yellow }
.y .header .title a { background-color: yellow }

9.6. 抽象块

SASS 还真是把 @extend 搞得复杂哦。 SASS 中还有一种“抽象块”的概述，相对于“抽象类”去理解吧。就是，定义的规则块，只是用来被 @extend 的，它自己不会出现在最终的 CSS 中，这种块，使用 %name 结尾来标识：

.x .y a%only
  color: red

.title div .link
  @extend %only

结果就是：

.x .y a { color: red; }
... a.link { color: red; }
... a.link { color: red; }

补充：

.x .y a { color: red; }
.x .y .title div a.link { color: red; }
.title div .x .y a.link { color: red; }

最后去掉不要的：

.x .y .title div a.link { color: red; }
.title div .x .y a.link { color: red; }

抽象块最后 a.link 的处理，跟普通 @extend 行为不一样，普通的 @extend 不会保留 a ，只有 .link 。

10. @import 引入其它文件

@import ，首先有原本的功能，即可以引入一段其它的 CSS 。

同时， SASS 中的 @import 也可以引入自己的 SASS 文件，比如：

@import "reset.sass"

.ok
  @extend .em

reset.sass 中有定义 .em { color: red; } ，最后编译就可以得到：

.em, .ok { color: red; }

@import 的其它使用形式还有：

@import "a", "b" 引入多个文件
@import "a" screen 使用媒体查询
@import url("http://fonts.googleapis.com/css?family=#{$family}") 使用变量

@import 可以在规则中使用，它的行为类似单纯的宏替换，比如：

.a1
  @import "a.sass"

11. @media 媒体查询

@media 的写法与其在 CSS 中是一样的，SASS 中， @media 的额外能力，就是你可以把它写在规则下面，编译的时候，会自动整理代码，把 @media 部分抽到最外面去：

.a
  color: red
  @media print
    color: black

会生成：

.a { color: red; }
@media print { .a { color: black; } }

SASS学习参考

1. SASS是什么

2. 安装

3. 变量, 赋值, 数据类型

4. 变量符号化

5. 嵌套规则与引用

6. 运算符, 逻辑判断, 控制结构

7. 函数定义

8. @mixin, 宏

9. @extend 续写

9.1. 最简单情况

9.2. 复合规则

9.3. 伪类

9.4. 序列规则下的使用

9.5. 总结

9.6. 抽象块

10. @import 引入其它文件

11. @media 媒体查询

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

SASS学习参考

1. SASS是什么

2. 安装

3. 变量, 赋值, 数据类型

4. 变量符号化

5. 嵌套规则与引用

6. 运算符, 逻辑判断, 控制结构

7. 函数定义

8. @mixin, 宏

9. @extend 续写

9.1. 最简单情况

9.2. 复合规则

9.3. 伪类

9.4. 序列规则下的使用

9.5. 总结

9.6. 抽象块

10. @import 引入其它文件

11. @media 媒体查询

热门文章

最新文章

相关课程

相关电子书

相关实验场景