Sass 入门（基础知识点汇总）

￡神魔★判官ぃ 2023-06-25 06:26 35阅读 0赞

**目录**

一、Sass简介

1、什么是CSS预处理器？

2、什么是Sass？

3、Sass和Less

4、Sass和Scss

一、Sass格式

二、Scss格式

5、Sass安装

NPM 安装

Windows 上安装

Mac OS X (Homebrew)安装

安装Sass和Compass

其他说明

sass安装

编译sass

命令行编译;

命令行编译配置选项;

四种编译排版演示;

nested 编译排版格式

expanded 编译排版格式

compact 编译排版格式

compressed 编译排版格式

软件方式编译;

LESS/Sass 编译工具Koala介绍

Live Sass编译器

6.语法基础

一、Sass变量

二、数据类型

三、Sass嵌套

四、Sass插值

五、Sass注释

7.基本运算

一、数字运算

二、字符运算

三、颜色运算

8.代码重用

一、Sass继承

二、Sass占位符

三、Sass混合宏

四、继承、占位符和混合宏

9、流程控制

一、@if语句

二、@for循环

三、@while循环

四、@each循环

--------------------

# 一、Sass简介 #

在学习Sass之前，我们先来介绍一下什么是CSS预处理器。因为Sass就是众多CSS预处理器中的其中一种。

## 1、什么是CSS预处理器？ ##

学过CSS的小伙伴都知道，CSS只是一门描述性的语言，你只能一行一行单纯地描述，并不能像JavaScript那样使用变量、循环、运算等方式来操作。

CSS预处理器的出现，使得我们可以像操作JavaScript那样以“编程”的方式来书写CSS。在CSS预处理器中，我们可以使用变量、循环、函数等方式来简化操作，提高开发效率。说得一点都没错，现在写CSS也可以这么爽了。小伙伴们看到这里，必须大吃一惊：“我out了！”

CSS预处理器，这个术语真专业……不过坑爹的术语，往往都是吓唬人的，实际并不难。CSS预处理器，说白了就是用编程方式来写CSS的一类语言，就这么简单。

CSS预处理器语言有很多，最常见的有3种：

*  （1）Sass；
 *  （2）Less；
 *  （3）Stylus；

这些CSS预处理语言都具备编程的特性，这种编程方式相对于纯CSS书写方式来说，具有更加简洁、适应性更强、可读性更佳、更易于代码的维护等优点。

## 2、什么是Sass？ ##

![什么是Sass][Sass]

Sass是功能最为强大、最成熟、并且是最为流行的CSS预处理器。因此，对于Sass、Less和Stylus这3个，我们还是建议大家学习Sass。

Sass是一种动态样式语言，比CSS多出好些功能（如变量、嵌套、运算、混入、继承、颜色处理、函数等），更容易阅读。

## 3、Sass和Less ##

Sass和Less是当下最为流行的2门CSS预处理语言，也是国内外讨论最热的2个。

Sass和Less差别不大，语法也相近。不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的都是为了让CSS开发更为灵活和更强大。但是两者也有以下明显区别：

*  （1）Sass由于是使用Ruby编写的，所以编译的时候是在服务器端处理；而Less由于是使用JavaScript编写的，所以编译的时候是在浏览器端处理；
 *  （2）Sass拥有更为强大的功能，如循环、函数、混合宏等，而less却没有；
 *  （3）Sass拥有成熟稳定的框架来辅助开发，特别是Compass，而less却没有；
 *  （4）Sass在国内外讨论热度最大，并且有一个稳定强大的团队在维护；
 *  （5）相当多的公司更为倾向于使用Sass，而不是less；

简单来说，Sass是比less更为强大并且使用更广的一门CSS预处理器语言。在实际开发中，如果你只是单纯地想简化CSS写法、统一风格、增强维护性的话，那么Sass和Less是一样的，学习哪一个都可以。

但是如果想要用到更多并且更加强大的功能的话，那么你应该选择Sass。在这里，我也强烈建议小伙伴们学习的是Sass，而不是Less。Sass最强大之处是配合Compass来辅助CSS开发。其中，Compass是在Sass的一个框架，保证让你爽到爆。对于Compass，别忘了关注即将上线的Compass教程。

疑问

1、我觉得用纯CSS方式来书写CSS都完全够了啊，而且也不麻烦，为什么还要学Sass或less呢？

Sass和Less使得我们可以用“编程”的方式来书写CSS代码，这个相对于纯CSS书写方式来说，开发速度更加快，可读性和可维护性更高。我们都知道，在整站开发中，可读性和可维护性是非常讲究的。而纯CSS书写方式在这些方面都比较欠缺。

此外在前端面试中，也会经常问到Sass和Less。学会其中的一门，绝对是你前端技能的加分项。并且现在相当多公司的前端开发中，都使用Sass和Less来辅助开发。所以小伙伴们，快快到Sass的碗里来！

## 4、Sass和Scss ##

在Sass中，有2种语法格式：（1）Sass格式；（2）Scss格式。也就是说，平常我们所说的Sass和Scss其实是同一个东西来的，统称为Sass。Sass和Scss仅仅是Sass的两种语法格式罢了。

### 一、Sass格式 ###

Sass格式，是Sass的“旧版本语法”。这种语法格式，不使用大括号“\{\}”和分号“;”，而是使用严格的缩进式语法规则来书写，也就是类似Ruby语言的写法。

举例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>$color:white</code> <code>$bgColor:red</code> &nbsp; <code>body</code> <code>color:$color</code> <code>background-color:$bgColor</code> </td> 
 </tr> 
 </tbody> 
</table>

说明：

从这里我们可以看出，Sass格式是不使用大括号“\{\}”和分号“;”的，并且在body元素定义样式的时候，color和background-color这2个属性都是严格缩进的。

### 二、Scss格式 ###

Scss格式，是Sass的“新版本语法”。这种语法格式，使用大括号“\{\}”和分号“;”，并不使用严格的缩进式语法规则来书写，也就是类似CSS书写的格式。

举例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>$color:white</code> <code>$bgColor:red</code> &nbsp; <code>body</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:$color</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color:$bgColor</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

说明：

从这里我们可以看出，Scss格式跟平常我们写CSS的格式是一样的。

## 5、Sass安装 ##

### NPM 安装 ###

我们可以使用 npm（NPM 使用介绍）来安装 Sass。

npm install -g sass

**注：**国内 npm 建议使用淘宝镜像来安装，参考：[NPM 国内慢的问题解决][NPM]

### Windows 上安装 ###

我们可以使用 Windows 的包管理器 [Chocolatey][] 来安装：

choco install sass

### Mac OS X (Homebrew)安装 ###

Mac OS 可以使用 [Homebrew][] 包管理器来安装：

brew install sass/sass/sass

更多安装方法可以查看官网：[https://sass-lang.com/install][https_sass-lang.com_install]

### 安装Sass和Compass ###

`sass`基于`Ruby`语言开发而成，因此安装`sass`前需要[安装Ruby][Ruby]。（注:mac下自带Ruby无需在安装Ruby!）

window下安装SASS首先需要安装`Ruby`，先从官网[下载Ruby][Ruby]并安装。安装过程中请注意勾选`Add Ruby executables to your PATH`添加到系统环境变量。如下图：

![format_png][]

安装完成后需测试安装有没有成功,运行`CMD`输入以下命令：

ruby -v
    //如安装成功会打印
    ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

如上已经安装成功。但因为国内网络的问题导致`gem`源间歇性中断因此我们需要更换`gem`源。

请尽可能用比较新的 RubyGems 版本，建议 2.6.x 以上。

gem update --system //该命令请翻墙一下
    gem -v
    3.0.3

//删除替换原gem源
    gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
    //打印是否替换成功
    gem sources -l
    https://gems.ruby-china.com
    # 确保只有 gems.ruby-china.com

如果你使用 Gemfile 和 Bundler (例如：Rails 项目)

你可以用 Bundler 的 [Gem 源代码镜像命令][Gem]。

bundle config mirror.https://rubygems.org https://gems.ruby-china.com

这样你不用改你的 Gemfile 的 source。

source 'https://rubygems.org/'
    gem 'rails', '4.2.5'
    ...

SSL 证书错误

正常情况下，你是不会遇到 SSL 证书错误的，除非你的 Ruby 安装方式不正确。

如果遇到 SSL 证书问题，你又无法解决，请修改 `~/.gemrc` 文件，增加 `ssl_verify_mode: 0` 配置，以便于 RubyGems 可以忽略 SSL 证书错误。

---
    :sources:
    - https://gems.ruby-china.com
    :ssl_verify_mode: 0

如果你在意 Gem 下载的安全问题，请正确安装 Ruby、OpenSSL，建议部署 Linux 服务器的时候采用 [这个 RVM 安装脚本][RVM] 的方式安装 Ruby。

### 其他说明 ###

`Bundler::GemspecError: Could not read gem at /home/xxx/.rvm/gems/ruby-2.1.8/cache/rugged-0.23.3.gem. It may be corrupted.`，这类错误是网络原因下载到了坏掉的文件到本地，请直接删除那个文件。

### sass安装 ###

`Ruby`自带一个叫做`RubyGems`的系统，用来安装基于`Ruby`的软件。我们可以使用这个系统来 轻松地安装`Sass`和`Compass`。要安装最新版本的`Sass`和`Compass`，你需要输入下面的命令：

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
    gem install sass
    gem install compass

在每一个安装过程中，你都会看到如下输出：

Fetching: sass-3.x.x.gem (100%)
    Successfully installed sass-3.x.x
    Parsing documentation for sass-3.x.x
    Installing ri documentation for sass-3.x.x
    Done installing documentation for sass after 6 secon
    1 gem installed

安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：

sass -v
    Sass 3.x.x (Selective Steve)
    
    compass -v
    Compass 1.x.x (Polaris)
    Copyright (c) 2008-2015 Chris Eppstein
    Released under the MIT License.
    Compass is charityware.
    Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

如下sass常用更新、查看版本、sass命令帮助等命令：

//更新sass
    gem update sass
    
    //查看sass版本
    sass -v
    
    //查看sass帮助
    sass -h

# #

### 编译sass ###

`sass`编译有很多种方式，如命令行编译模式、sublime插件`SASS-Build`、编译软件`koala`、前端自动化软件`codekit`、Grunt打造前端自动化工作流`grunt-sass`、Gulp打造前端自动化工作流`gulp-ruby-sass`等。

### 命令行编译; ###

//单文件转换命令
    sass input.scss output.css
    
    //单文件监听命令
    sass --watch input.scss:output.css
    
    //如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
    sass --watch app/sass:public/stylesheets

### 命令行编译配置选项; ###

命令行编译`sass`有配置选项，如编译过后css排版、生成调试map、开启debug信息等，可通过使用命令`sass -v`查看详细。我们一般常用两种```--style``--sourcemap```。

//编译格式
    sass --watch input.scss:output.css --style compact
    
    //编译添加调试map
    sass --watch input.scss:output.css --sourcemap
    
    //选择编译格式并添加调试map
    sass --watch input.scss:output.css --style expanded --sourcemap
    
    //开启debug信息
    sass --watch input.scss:output.css --debug-info

*  `--style`表示解析后的`css`是什么排版格式;  
    sass内置有四种编译格式:```nested``expanded``compact``compressed```。
 *  `--sourcemap`表示开启`sourcemap`调试。开启`sourcemap`调试后，会生成一个后缀名为`.css.map`文件。

### 四种编译排版演示; ###

//未编译样式
    .box {
      width: 300px;
      height: 400px;
      &-title {
        height: 30px;
        line-height: 30px;
      }
    }

### nested 编译排版格式 ###

/*命令行内容*/
    sass style.scss:style.css --style nested
    
    /*编译过后样式*/
    .box {
      width: 300px;
      height: 400px; }
      .box-title {
        height: 30px;
        line-height: 30px; }

### expanded 编译排版格式 ###

/*命令行内容*/
    sass style.scss:style.css --style expanded
    
    /*编译过后样式*/
    .box {
      width: 300px;
      height: 400px;
    }
    .box-title {
      height: 30px;
      line-height: 30px;
    }

### compact 编译排版格式 ###

/*命令行内容*/
    sass style.scss:style.css --style compact
    
    /*编译过后样式*/
    .box { width: 300px; height: 400px; }
    .box-title { height: 30px; line-height: 30px; }

### compressed 编译排版格式 ###

/*命令行内容*/
    sass style.scss:style.css --style compressed
    
    /*编译过后样式*/
    .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

### 软件方式编译; ###

这里推荐[koala][]&[codekit][],它们是优秀的编译器，界面清晰简洁，操作起来也非常简单。鉴于koala是免费编译器，简单操作如下图:

![format_png 1][]

### LESS/Sass 编译工具Koala介绍 ###

易上手的Sass编译工具koala支持多个环境的安装文件 [下载Koala][koala]

koala是一个国产免费前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

### Live Sass编译器 ###

VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。

![aHR0cHM6Ly93d3cuc2Fzcy5oay91cGxvYWRzLzIwMDIyNS8xLTIwMDIyNTE0MTUxMzk0Mi5naWY][]

[Visual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS][Visual Studio Code_Live Sass Compiler_Sass_Scss_CSS]

## 6.语法基础 ##

### 一、Sass变量 ###

在Sass中，我们声明变量使用的是“$”（美元符号）开头。Sass的变量包括3部分：声明符、变量名、值。

语法：

![Sass变量][Sass 1]

说明：

在Sass中，对于变量的取值有2种方式：（1）一般值；（2）默认值。定义变量的默认值很简单，我们只需要在“变量值”后面加上“!default”就可以了。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>$</code><code>width</code><code>:</code><code>10</code><code>p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //定义变量的一般值</code> <code>$</code><code>width</code><code>:</code><code>10px</code> <code>!</code><code>default</code><code>;&nbsp;&nbsp;&nbsp;&nbsp; //定义变量的默认值</code> </td> 
 </tr> 
 </tbody> 
</table>

### 二、数据类型 ###

在Sass中，共有7种数据类型：

*  （1）数字值，如10、10px、10%等；
 *  （2）字符串，如"微软雅黑"、sans-serif等；
 *  （3）布尔值，如true、false；
 *  （4）颜色值，如\#FF00FF、RGB(255,0,255)、hsl(360,50%,50%)；
 *  （5）列表值，如“10px 20px 30px 40px”（空格隔开）或“YaHei,Arial,Helvetica,sans-serif”（逗号隔开）；
 *  （6）Map值，简单了解即可；
 *  （7）空值null；

### 三、Sass嵌套 ###

Sass为我们提供了一种方便的操作方式：嵌套。在Sass中，共有3种嵌套方式：

*  （1）选择器嵌套；
 *  （2）属性嵌套；
 *  （3）伪类嵌套；

### 四、Sass插值 ###

在Sass中，我们可以通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”，从而来“构造”一个新的选择器名、新的属性名以及新的属性值。

语法：

### 五、Sass注释 ###

在Sass中，共有3种注释方式：

*  （1）/\*注释内容\*/
 *  （2）//注释内容
 *  （3）/\*!注释内容\*/

第1种注释方式在编译后不会保留下来，第2种和第3种注释方式在编译后都会保留下来。其中，第3种注释方式用得较少，一般用于CSS文件顶部声明版权信息。

## 7.基本运算 ##

### 一、数字运算 ###

在Sass中，共有4种数字运算方式：加、减、乘、除。对于这4种运算方式，我们需要注意以下几点：

*  （1）在Sass加法中，数值可以带单位，但是需要运算单位相同，如果不相同则编译不通过；
 *  （2）在Sass减法中，数值可以带单位，但是需要运算单位相同，如果不相同则编译不通过；
 *  （3）在Sass乘法中，只能有一个数值带单位，另外一个数值只能是不带单位的数字。如果两个都是带单位的数字，则Sass会报错而编译不通过；
 *  （4）在Sass除法中，由于“/”在CSS中已经作为一种符号来使用了，所以我们需要在外面添加一个“小括号()”；

在实际开发中，不管是加法、减法，还是乘法、除法运算，我们都建议在外面加上小括号。这种书写方式，能够使得代码一目了然，也方便维护。希望小伙伴们也规范一下自己的书写方式。

### 二、字符运算 ###

在Sass中，我们可以使用“+”（加号）来实现字符串的拼接。其中，结果字符串是否有引号，取决于左边字符串是否有引号。

举例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>div::before</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>content: "Welcome to " + lvyestudy;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font:sans- + "serif";</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>div::before </code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>content</code><code>: </code><code>"Welcome to lvyestudy"</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font</code><code>: sans-serif;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 三、颜色运算 ###

在Sass中，我们也是可以对颜色值进行运算的。颜色运算支持加、减、乘、除，并且是分段进行计算的。也就是说，红、绿、蓝这3个部分的颜色是单独进行计算的。

此外，如果颜色值不是十六进制颜色值（如\#010203），而是RGB或者HSL的话，我们都是将RGB或HSL先转换为十六进制颜色值，然后再进行加、减、乘、除运算的。

举例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>div</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color: (#010203 + #040506);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>div</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>#050709</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

## 8.代码重用 ##

在实际开发中，我们经常会碰到好些不同地方都用到相同的CSS样式的情况。如果相同的CSS样式只有一个CSS属性，此时只需要使用Sass变量实现就可以满足了。如果相同的CSS样式有多个CSS属性，这个时候我们就希望把“相同的CSS样式”当做整块来处理。

在Sass中，为我们提供了3种方式来处理经常被多个地方使用的相同的CSS代码块：

*  （1）继承“@extend”；
 *  （2）占位符“%placeholder”；
 *  （3）混合宏“@mixin”；

这几种实现代码重用的方式，在Sass开发中非常非常重要，因为使用这些可以极大地提高我们的开发效率，所以这一章小伙伴们要重点学习。接下来我们一一给大家详细介绍。

### 一、Sass继承 ###

CSS具有2大特性：继承性和层叠性。CSS的继承性，指的是子元素继承了父元素的某些样式属性，例如在父元素中定义字体颜色（color），子元素会继承父元素的字体颜色。对于CSS这些，之后再说。看看我有没有时间，吧CSS进阶写一下

在Sass中，我们可以使用“@extend”来继承一个样式块，从而实现代码的重用。

举例1：

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>.spriteAll, .sprite</code><code>-1</code><code>, .sprite</code><code>-2</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bakckground: </code><code>url</code><code>(images/sprite.png) </code><code>no-repeat</code><code>;</code> <code>}</code> <code>.sprite</code><code>-1</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-position</code><code>: </code><code>0</code> <code>-30px</code><code>;</code> <code>}</code> <code>.sprite</code><code>-2</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-position</code><code>: </code><code>0</code> <code>-60px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

分析：

在这个例子中，我们定义了一个“.spriteAll”类用来存放公共样式，然后在“.sprite-1”和“.sprite-2”中使用@extend来继承“.spriteAll”类。

举例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>.btn</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding:6px 10px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid silver;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size:14px;</code> <code>}</code> <code>.btn-primary</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@extend .btn;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:white;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color:red;</code> <code>}</code> <code>.btn-second</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@extend .btn;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:orange;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color:green;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>.btn, .btn-primary, .btn-second</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding</code><code>: </code><code>6px</code> <code>10px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>silver</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size</code><code>: </code><code>14px</code><code>;</code> <code>}</code> <code>.btn-primary </code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>white</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>red</code><code>;</code> <code>}</code> <code>.btn-second </code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: orange;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>green</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

分析：

在这个例子中，我们定义了一个“.btn”类用来存放公共样式，然后在“.btn-primary”和“.btn-second”中使用@extend来继承“.btn”类。

从上面两个例子我们可以看出，继承这种方式来实现代码的重用是非常实用的。它使得代码更为精简，并且一目了然，具有更高的可读性和可维护性。

### 二、Sass占位符 ###

在Sass中，我们引入了占位符“%placeholder”来进一步优化“@extend”。我们先来看一个例子。

举例：使用继承“@extend”

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>.btn, .btn-primary, .btn-second</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding</code><code>: </code><code>6px</code> <code>10px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>silver</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size</code><code>: </code><code>14px</code><code>;</code> <code>}</code> <code>.btn-primary </code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>white</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>red</code><code>;</code> <code>}</code> <code>.btn-second </code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: orange;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>green</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

分析：

从这个例子我们可以看出，继承“@extend”是非常好用的。通过@extend，我们可以直接在“.btn-primary”和“.btn-second”中插入定义好的“.btn”，这样每次只要你修改了“.btn”中的样式，“.btn-primary”和“.btn-second”中的样式都会同时修改。

但是稍微细心的小伙伴应该也发现了，如果我们的HTML中没有任何一个元素使用“.btn”的话，“.btn”存在的唯一目的就是仅仅用来给“.btn-primary”和“.btn-second”继承。也就是说，“.btn”这个类在编译出来的CSS中是多余的。那有没有更好的办法来实现我们预期效果呢？

在新版本的Sass中，引入了“占位符%placeholder”来优化“继承@extend”的输出。

举例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>%btn</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding:6px 10px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid silver;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size:14px;</code> <code>}</code> <code>.btn-primary</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@extend %btn;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:white;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color:red;</code> <code>}</code> <code>.btn-second</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@extend %btn;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:orange;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color:green;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>.btn-primary, .btn-second</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding</code><code>: </code><code>6px</code> <code>10px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>silver</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>font-size</code><code>: </code><code>14px</code><code>;</code> <code>}</code> <code>.btn-primary </code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>white</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>red</code><code>;</code> <code>}</code> <code>.btn-second </code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: orange;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>: </code><code>green</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

分析：

上一个例子，我们是定义一个基类“.btn”（类，都是以“.”开头）。而在这个例子中，我们是定义一个占位符“%btn”（占位符，都是以“%”开头）。我们对比一下这两个例子的输出结果就可以知道，使用占位符的输出结果是不包含基类的。

“占位符%placeholder”并非用来替换“继承@extend”的，而是用来配合“继承@extend”来使用的。从上面我们可以知道，继承@extend有2种输出方式：

*  （1）需要保留基类的：只使用@extend来实现；
 *  （2）不需要保留基类的：使用@extend配合%placeholder来实现；

此外在实际开发中，继承中的基类是否就一定要去掉呢？这个倒不一定。如果你的HTML结构需要用到基类，则不需要使用占位符的方式来去掉；如果你的HTML不需要用到基类，则建议使用占位符配合继承来去掉。

### 三、Sass混合宏 ###

在Sass中，我们可以使用“混合宏（mixin）”来处理经常被多个地方使用的相同的CSS代码块。混合宏，跟JavaScript中的函数很相似，我们可以称之为“Sass中的函数”。

**一、混合宏的定义和调用**

在Sass中，我们使用“@mixin”来定义一个混合宏，然后使用“@include”来调用一个混合宏。

语法：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>//定义一个混合宏</code> <code>@mixin 混合宏名</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>样式属性</code><code>1:</code><code>取值</code><code>1</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>样式属性</code><code>2:</code><code>取值</code><code>2</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>……</code> <code>}</code> <code>//调用一个混合宏</code> <code>选择器</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include 混合宏名;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

说明：

Sass中的混合宏跟C语言的宏是非常相似的。所谓的“宏”，指的是可重用的代码块。

@mixin用来定义一个混合宏，@include用来调用一个混合宏。此外，@mixin跟CSS3中的@font-face和@media语法是一样的。

举例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>@mixin radius</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius:5px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius:5px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius:5px;</code> <code>}</code> <code>#header</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:red;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include radius;</code> <code>}</code> <code>#footer</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:green;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include radius;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>#header</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius: </code><code>5px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius: </code><code>5px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius: </code><code>5px</code><code>;</code> <code>}</code> <code>#footer</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>green</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius: </code><code>5px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius: </code><code>5px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius: </code><code>5px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**二、混合宏的参数**

在Sass中，我们不仅可以定义“不带参数的混合宏”，也可以定义“带参数的混合宏”。其中，混合宏的参数可以是1个，也可以是N个。

举例：带一个参数的混合宏

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>@mixin radius($radius)</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius:$radius;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius:$radius;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius:$radius;</code> <code>}</code> <code>#header</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:red;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include radius(3px);</code> <code>}</code> <code>#footer</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:green;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include radius(5px);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>#header</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius: </code><code>3px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius: </code><code>3px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius: </code><code>3px</code><code>;</code> <code>}</code> <code>#footer</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>green</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius: </code><code>5px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius: </code><code>5px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius: </code><code>5px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

举例：带多个参数的混合宏

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>@mixin center($width,$height)</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width: $width;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height: $height;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>position: absolute;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>top: 50%;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>left: 50%;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-top: -($height) / 2;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-left: -($width) / 2;</code> <code>}</code> <code>div</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include center(100px,80px);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>div </code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>: </code><code>100px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>: </code><code>80px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>position</code><code>: </code><code>absolute</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>top</code><code>: </code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>left</code><code>: </code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-top</code><code>: </code><code>-40px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-left</code><code>: </code><code>-50px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

分析：

这个混合宏里面的CSS代码是一个功能代码块，是用来同时实现元素的水平居中和垂直居中的。在实际开发中，对于这些功能代码块，我们都是配合混合宏（mixin）来使用，非常的简单快速。现在大家体会到Sass比纯CSS强大的地方了吧。对于这种开发技巧，更多请参考“[HTML和CSS进阶教程][HTML_CSS]”中的“第13章 CSS技巧”。

在Sass中，我们还可以为混合宏传递的参数定义默认值。混合宏参数的默认值，跟变量的默认值是非常相似的，小伙伴们记得对比一下，这样更能加深理解和记忆。

举例：参数带默认值

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>@mixin radius($radius:3px)</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius:$radius;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius:$radius;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius:$radius;</code> <code>}</code> <code>#header</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:red;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include radius;</code> <code>}</code> <code>#footer</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:green;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include radius(5px);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>#header</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>red</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius: </code><code>3px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius: </code><code>3px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius: </code><code>3px</code><code>;</code> <code>}</code> <code>#footer</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color</code><code>: </code><code>green</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border-radius: </code><code>5px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-border-radius: </code><code>5px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-moz-border-radius: </code><code>5px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

分析：

在这个例子中，我们给“混合宏radius”传了一个参数“$radius”，并且给这个参数定义了一个默认值“3px”。如果我们页面有很多地方的圆角都是“3px”的话，那么这种默认值的方式就会非常好用。因为在调用的时候，我们只需要调用默认的“混合宏radius”就可以了。

### 四、继承、占位符和混合宏 ###

很多初学者刚刚接触的时候，都容易纠结什么时候用混合宏，什么时候用继承，然后什么时候用占位符。其实，这3个都有它们自身的优缺点。这一节我们来详细探讨一下这3个在实际开发中的不同。

由于“继承@extend”和“占位符%placeholder”都是属于继承的2种输出方式，这一节我们姑且把这两者统称为“继承”，然后再与混合宏比较。

<table> 继承、占位符和混合宏的声明方式和调用方式 
 <thead> 
 <tr> 
 <th>方法</th> 
 <th>声明方式</th> 
 <th>调用方式</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>继承</td> 
 <td>.class</td> 
 <td>@extend</td> 
 </tr> 
 <tr> 
 <td>占位符</td> 
 <td>%placeholder</td> 
 <td>@extend</td> 
 </tr> 
 <tr> 
 <td>混合宏</td> 
 <td>@mixin</td> 
 <td>@include</td> 
 </tr> 
 </tbody> 
</table>

**一、继承与混合宏**

对于继承（包括@extend和%placeholder）和混合宏，我们总结出以下几点：

*  （1）继承和混合宏都能实现相同代码块的重用，极大提高开发效率；
 *  （2）继承的使用一般不存在代码冗余，而混合宏的使用会存在代码冗余；
 *  （3）继承不可以传递参数，而混合宏可以传递参数；

我们先来看几个例子，然后再从中对比一下继承与混合宏的区别。

举例1：使用继承来实现

编译出来的CSS代码如下：

举例2：使用混合宏来实现

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>.sprite</code><code>-1</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bakckground: </code><code>url</code><code>(images/sprite.png) </code><code>no-repeat</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-position</code><code>: </code><code>0</code> <code>-30px</code><code>;</code> <code>}</code> <code>.sprite</code><code>-2</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>bakckground: </code><code>url</code><code>(images/sprite.png) </code><code>no-repeat</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-position</code><code>: </code><code>0</code> <code>-60px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

分析：

从上面两个例子，我们可以很清楚地看出混合宏有一个致命的缺点：编译出来的CSS不会把相同的代码块合并，造成代码冗余。

虽然混合宏有代码冗余的缺点，但是它也有一个明显的优点，那就是：可以使用传递参数的方式来封装功能代码块。

举例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>@mixin textCenter($height)</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:$height;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>line-height:$height;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align:center;</code> <code>}</code> <code>#div1</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include textCenter(20px);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:100px;</code> <code>}</code> <code>#div2</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@include textCenter(40px);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:200px;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

编译出来的CSS代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>#div</code><code>1</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>: </code><code>20px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>line-height</code><code>: </code><code>20px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align</code><code>: </code><code>center</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>: </code><code>100px</code><code>;</code> <code>}</code> <code>#div</code><code>2</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>: </code><code>40px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>line-height</code><code>: </code><code>40px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align</code><code>: </code><code>center</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>: </code><code>200px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

分析：

上面这个例子，如果要使用继承就无能为力了。在实际开发的过程中，对于“功能代码块”（类似于JavaScript中的函数）我们都是使用混合宏来实现的，因为功能代码块往往是可以通过传递不同的参数来满足我们开发的不同需求。

**二、“继承@extend”和“占位符%placeholder”**

从之前的学习我们知道，“占位符%placeholder”并非用来替换“继承@extend”的，而是用来配合“继承@extend”来使用的。也就是说，继承@extend有2种输出方式：

*  （1）需要保留基类的：只使用@extend来实现；
 *  （2）不需要保留基类的：使用@extend配合%placeholder来实现；

这个我们很好理解，小伙伴们回去翻一翻“Sass占位符”这一节就知道了，这里不再重复说明。

## 9、流程控制 ##

Sass作为一门编程式的语言，也有属于自己的一套流程控制语法。

*  （1）@if语句；
 *  （2）@for循环；
 *  （3）@while循环；
 *  （4）@each循环；

### 一、@if语句 ###

在Sass中，我们可以使用“@if语句”来进行条件选择判断。Sass的条件选择语句共有3种：

*  （1）@if…（单向选择）；
 *  （2）@if…@else…（双向选择）；
 *  （3）@if…@else if…（多向选择）；

### 二、@for循环 ###

在Sass中，我们可以使用“@for”来实现循环操作。其中，Sass中的@for循环有2种方式。

语法：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>方式</code><code>1</code><code>：@for $i from 开始值 through 结束值</code> <code>方式</code><code>2</code><code>：@for $i from 开始值 to 结束值</code> </td> 
 </tr> 
 </tbody> 
</table>

说明：

这2种方式是相似的，唯一的区别是：方式1包括结束值，方式2不包括结束值。其中“开始值”和“结束值”都是正整数。

### 三、@while循环 ###

在Sass中，我们也可以使用@while语句来实现循环操作。跟JavaScript一样，@while语句既是循环语句，也是条件判断语句。

语法：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>@while(判断条件)</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>执行语句;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

说明：

在Sass中，没有类似于JavaScript的“do...while...”这种语句。这一点小伙伴们要注意一下。

### 四、@each循环 ###

除了@for以及@while这2种循环方式之外，Sass还为我们提供了另外一种循环方式：each循环。Sass中的each循环跟jQuery中的each循环很相似，大家对比一下。

语法：

说明：

$var是一个变量，也可以根据后面列表值表示的内容需要写成$item、$color等。列表值，是Sass中的一种数据类型，可以称之为“Sass中的数组”。

[Sass]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL3Nhc3MvMS0xLTEucG5n?x-oss-process=image/format,png
[NPM]: https://www.runoob.com/w3cnote/npm-slow-use-cnpm.html
[Chocolatey]: https://chocolatey.org/
[Homebrew]: https://brew.sh/
[https_sass-lang.com_install]: https://sass-lang.com/install
[Ruby]: http://rubyinstaller.org/downloads
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuc2Fzcy5oay9pbWFnZXMvMjAxNS0wOC0wNF81NWMwNWQ0ZWQwYTA1LmpwZw?x-oss-process=image/format,png
[Gem]: http://bundler.io/v1.5/bundle_config.html#gem-source-mirrors
[RVM]: https://github.com/huacnlee/init.d/blob/master/install_rvm
[koala]: https://www.sass.hk/skill/koala-app.html
[codekit]: http://incident57.com/codekit/
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuc2Fzcy5oay9pbWFnZXMvMjAxNS0wOC0wNF81NWMwNWRmYTk3NTI0LnBuZw?x-oss-process=image/format,png
[aHR0cHM6Ly93d3cuc2Fzcy5oay91cGxvYWRzLzIwMDIyNS8xLTIwMDIyNTE0MTUxMzk0Mi5naWY]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuc2Fzcy5oay91cGxvYWRzLzIwMDIyNS8xLTIwMDIyNTE0MTUxMzk0Mi5naWY
[Visual Studio Code_Live Sass Compiler_Sass_Scss_CSS]: https://www.sass.hk/skill/sass154.html
[Sass 1]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5sdnllc3R1ZHkuY29tL0FwcF9pbWFnZXMvbGVzc29uL3Nhc3MvMy02LTEucG5n?x-oss-process=image/format,png
[HTML_CSS]: http://www.lvyestudy.com/blog/blog0005.aspx