SASS教程 +SCSS：CSS 再进化，掌握语法攻略！

这几天摸索了SASS+SCSS的写法，发现有许多的GitHub项目，使用它进行开发。

自己进行几个项目后，编写速度确实有提升，于是整理出这篇 SASS+SCSS 教程，从 SASS+SCSS 介绍 → 安装+执行 → 语法 SASS教程 ，进行文章编写。

不敢说可以从入门到进阶，但对SASS主观念的掌握，应该是没问题的，那我们开始啰 ? ?

• 1. SASS+SCSS介绍
• 2. 安装+执行
• 3. 嵌套
• 4. 引用父选择器 &
• 5. 变量
• 6.引入
• 7. 混合
• 8. 继承
• 9. 操作符
• 10.结论

1. SASS+SCSS 介绍

SASS 是一个成熟且稳定的 CSS 预处理器，除了把普通的 CSS 语法强化，它还使用了 SassScript 增加了许多功能，如：变量、嵌套、混合、导入等 .. 功能，在一般项目的编写或是中大型的项目上，都可以编写的更加快速。

SASS 会编译（compiled）程序码，转成一般 CSS 形式，让浏览器可以解读输出，把页面呈现出来。

主要包含两种写法：分别是旧版的 SASS（缩排语法，副档名.sass，使用缩排来区分程序码块，与 Haml 类似）和新版的 SCSS（块语法，扩展名.scss，使用和 CSS 相同方式，用大括号分开）。

SCSS 的原型是 SASS，所以都通称 SASS 也没问题，只是写法有些许不同，我们先来看一下：

/** 一般 css 写法 **/

.nav{
    background: #ccc;
}
.nav li {
    display: inline-block;
}
.nav li a{
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000;
}
.nav li img{
    width: 100%;
}

SASS写法：采用缩进语法（TAB）的方式，去除了一般 CSS 的括号、分号等 .. 加快编写流程，有一部分的人喜欢这样的编写方式而采用，如下：

/** sass写法 **/

.nav
    background: #ccc
    li
        display: inline-block
        a
            display: block
            padding: 15px
            text-decoration: none
            color: #000
        img
            width: 100%

SCSS写法：采用“ 块语法（Block）」，一般从 CSS 转为 SCSS 开发比较无痛，保留了括号、分号等 .. 元素，相对于上面的 SASS 是比较新的编写方式，学习成本比较低，是目前主流的方式，如下：

/** scss写法 **/

.nav{
    background: #ccc;
    li {
        display: inline;
        a {
            display: block;
            padding: 15px;
            text-decoration: none;
            color: #000;
        }
        img {
            width: 100%;
        }
    }
}

看完上面的程序码，会发现 SASS 可以协助解决编写 CSS 常遇到的几个问题，如：「 重复编写 」、「 后续维护 」、「 漏写问题 」等问题 ..，然后加快开发流程，如下：

若想了解更多 SASS & SCSS 差异，也可以 看这篇 stack oveflow 的讨论：）

2. 安装+执行

安装+执行 SASS 的方式有满多种，有使用第三方应用程序的，也有直接安装在本机上的，这边会建议直接安装在本机上，比较一劳永逸，这边列出几种安装方式，如下：

1. 使用 Node.js 安装 $ npm install -g sass

2. 使用 Ruby 安装 $ gem install compass

3. 使用 Brew 安装（Mac专用）$ brew install sass

命令运行完成，基本上就安装好了，若想测试是否安装成功，可以输入看是否有显示 SASS 版本号，若有的话代表安装完成 ? ?$sass -v

首先在项目文件夹下，生成 index.html 和两个文件夹 css、sass ，然后在 sass 下面新增一个 style.scss，这支文件是我们开发，主要编写样式的文档。

我们现在要试着把 sass 文件夹里的 style.scss ，编译成浏览器看的懂的 .css 扩展名型式。

所以下指令把 style.scss 文档转译生成 style.css，并放置在 css 文件夹里，如下：

$ sass sass/style.scss:css/style.css

如果顺利的话，应该会看到 css 文档夹里，新增了两个文档，分别是「 style.css 」和「 style.css.map 」，这边比较要留意的是 style.css（浏览器主要解读这只文件）。

若持续有样式需新增，每次一编写完 style.scss 就得执行一次 指令，才能在浏览器上看到变化，相信一定会很想撞墙 ? ?$ sass sass/style.scss:css/style.css

所以这时可以改下另一个指令（加上参数，若原有的 style.css / style.css.map 已存在，会自动覆盖，不存在的话会自动生成新的），如下：--watch

$ sass --watch sass/style.scss:css/style.css

执行后，会发现 sass 已经开始在监听 style.scss ，若这只文档有修改，style.css 变会即时的进行编译，给浏览器做使用，如下影片：

在开发过程中，一个项目可能不只有一个样式文件，假如有多个文档需同时进行监听，这边提供几个方式给大家：

$ sass --watch path/to/filename.scss:path/filename.css

$ sass --watch path/filename1.scss:path/filename1.css path/filename2.scss:path/filename2.css path/filename3.scss:path/filename3.css

$ sass --watch sass:css

$ sass --watch .

到了这一步，若顺利的话，相信你也学会，如何在编写 sass/scss 文档时，指定的 css 文档可以同步的进行编译，并让浏览器能够顺利的出现画面。

个人觉的 sass 学习比较麻烦的就是安装+执行这个章节，后面就是语法部分，语法就相对简单明了了，原来就有 css 开发经验的捧有们，相信也可以很快就入手的 ? ?

接下来，我们开始前进到语法部分啰：）

3. 嵌套

SASS 提供 CSS 语法扩展，如：嵌套功能（ Nested Rules ），主要是解决 CSS 编写过程中，父元素重复编写问题，可以缩短开发流程、方便后续维护、样式模块化等.. 优点 ? ?

这是容易入门 SASS教程 的第一步，直接上代码，我们使用 SASS 编写样式，并对比编译后的 CSS ，如下：

/** 编译前( sass 语法 ) **/

#main {
    width: 200px;
    height: 100px;
    background: #ddb92a;

    .greenbox{
        width: 100px;
        height: 50px;
        background: green;
        p, a {
            font-size: 20px;
        }
    }
}

/** 编译后（ 转为 CSS 语法输出 ） **/

#main {
    width: 200px;
    height: 100px;
    background: #ddb92a;
}
#main .greenbox{
    width: 100px;
    height: 50px;
    background: green;
}
#main .greenbox p, #main .greenbox a{
    font-size: 20px;
}

除此之外，常用的属性也可以进行 CSS「嵌套属性」，比如： 、、,会发现 多次出现。font-familyfont-sizefont-weightfont

还有常见的 系列，比如：、、、,都可以用嵌套功能，来节省开发时间唷，这边上代码，如下 ? ?backgroundbackground-colorbackground-positionbackground-sizebackground-image

/** 编译前( sass语法 ) **/

.main {
    font: {
        family: Helvetica, sans-serif;
        size: 15em;
        weight: bold;
    }
}

/** 编译后（ 转为 CSS 语法输出 ） **/

.main {
    font-family: Helvetica, sans-serif;
    font-size: 15em;
    font-weight: bold;
}

到目前，对嵌套功能应该有初步认识了，若之前有看过别人写的 SASS / SCSS 文件，应该会有种似曾相似的感觉吧 ? ?

理解了它，接下来我们继续看 SASS 还有什么特别的地方，可以让我们学习的 ..

4. 引用父选择器 &

如果想在嵌套状态下，取得外层的父选择器，那可以使用「 & 」，它会直接抓父选择器给你用。

常会把它用在，如 CSS 元件状态： 、、、、 等 ..，或是 、 ，这边上个代码，如下：:hover:focus:hover:link:visited:before:after

/** 编译前( sass语法 ) **/

#main {
    display: block;
    a {
        color: #d0b95b;
        &:hover, &:active, &:focus {
            color: #a08106;
            outline: none;
            text-decoration: none !important;
        }
    }
}

/** 编译后（ 转为 CSS 语法输出 ） **/

#main {
    display: block;
}
#main a {
    color: #d0b95b;
}
#main a:hover, #main a:active, #main a:focus {
    color: #a08106;
    outline: none;
    text-decoration: none !important;
}

还有另一种用法，也常常看到，如下：

/** 编译前( sass语法 ) **/

#main{
    &.color-2{
        background: red;
        &:before{
            border: 1px solid #ccc;
        }
    }
    &.color-3{
        background: yellow;
        &:before{
            border: 1px solid blue;
        }
    }
}

/** 编译后（ 转为 CSS 语法输出 ） **/
#main.color-2 {
    background: red; 
}
#main.color-2:before {

    border: 1px solid #ccc; 
}
#main.color-3 {
    background: yellow; 
}
#main.color-3:before {
    border: 1px solid blue; 
}

能抓到父选择器，是不是开发起来也方便多了呢？

一开始看到别人编写的 SASS 时，觉得「 & 」的写法满酷的，后来才懂 .. 原来是这样运作呀 ? ?

5. 变量

在我们实际编写 CSS 的过程中，常会遇到多次相同的颜色、字体、字体大小等 .. 重复出现。

重复出现是好事，因为只要复制+贴上就好了 .. 但假如遇到哪天设计师 / 客户，需要修改就 .. （因为全都需要更改 ? ? ）

所以SASS可以协助我们解决这问题，就如同JS变量逻辑一样，只需改最源头的变量即可，其他所有引用该变量的地方，值都会自动更改。

SASS 中使用 进行变量声明，支持 7 种主要数据类型：$

在此选择对比一下，使用 SASS 开发的编译前（ SASS 语法） & 编译后（ 转为 CSS 语法输出）的代码，如下：

/** 编译前( sass 语法 ) **/

$bnr-font: Helvetica, sans-serif;
$bnr-color: #494947;

.banner1 p{
    font-family: $bnr-font;
    color: $bnr-color;
    padding: 10px 15px;
    letter-spacing: 0.2em;
}
.banner2 p{
    font-family: $bnr-font;
    color: $bnr-color;
    margin: 15px;
}

/** 编译后（ 转为 CSS 语法输出 ） **/

.banner1 p{
    font-family: Helvetica, sans-serif;
    color: #494947;
    padding: 10px 15px;
    letter-spacing: 0.2em;
}
.banner2 p{
    font-family: Helvetica, sans-serif;
    color: #494947;
    margin: 15px;
}

如此一来，当哪天收到需要更改某通用按钮颜色、通用字体字体 .. ，就可以直接更改变量即可，是不是很方便 ? ?

6.引入

SASS 扩展了 CSS 的 功能，允许在文档内导入其他的 SASS 或 SCSS 子文件。@import

在文件进行编译后，被导入的 SASS 或 SCSS 子文件，会全部合并到同一个 CSS 文件，然后呈现出来。

常见的 .sass 或 .scss 导入

这边展示一下基本用法，我们把 导入到 中，直接上代码：_reset.scssmain.scss

/** 编译前( sass 语法 ) **/

/** _reset.scss **/
html, body, ul, ol, a {
    margin:  0;
    padding: 0;
}

/** main.scss **/
@import 'reset';
body {
    background: #a08106;
    font-size: 16px;
}

/** 编译后（ 转为 CSS 语法输出 ） **/

html, body, ul, ol, a {
    margin:  0;
    padding: 0;
}
body {
    background: #a08106;
    font-size: 16px;
}

小提醒：若有多个文件需导入，可同时使用多个 引用文件，如下图 ? ?@import

监听父文件即可

编写代码过程中，可以把不同样式区块的 SASS 或 SCSS 代码，拆开成不同独立的文档，然后使用 把各片段文件，统整导入到同一支 或 文档中，并监听这一支文件即可 ? ?@import.sass.scss

在文件进行监听时，所有进来的或 子文件，也同时被监听，所以当子文件有修改，父文件编译出的也会自动更新。@import.sass.scss.css

使用下划线，SASS 编译自动忽略

若有片段文件不需 SASS 编译出新的 CSS 文件，可在文件开头添加一个下划线，在编译过程中，系统就会忽略它，而只对开头无下划线的文件，进行新的 CSS 文件生成。

上述的范例说明

看一下另一个范例，下面是 bootstrap 的目录文件：

一般 CSS @import 功能

@import 默认情况，会默认导入同名的 或 文件，但在以下情况下，仅当成一般的 CSS 语句，不会导入任何的 SASS 文件，如下：.sass.scss@import

7. 混合

若是有重复的代码，会不断使用到，就可用混合指令（Mixin Directives），直接把样式封装成一个类名称，就可以重复调用，如下：

/** 编译前( sass 语法 ) **/

/** 定义 mixin 指令 **/
@mixin font-main {
    font: {
      family: Arial;
      size: 16px;
      weight: 100;
    }
    color: #000;
}

/** 引用 mixin **/
.box p {
    @include font-main;
}

/** 编译后（ 转为 CSS 语法输出 ） **/

.box p {
  font-family: Arial;
  font-size: 16px;
  font-weight: 100;
  color: #000; 
}

使用参数功能

使用“ 混合 ”功能，有设置参数功能（ 可设置默认值 ），让整体功能变更弹性，有点像函数的传入参数，如下：

/** 编译前( sass语法) **/

/** 定义mixin 指令 **/
@mixin border-set($color, $width, $style: solid) {
    border: {
        color: $color;
        width: $width;
        style: $style;
    }
}
@mixin background-set($color, $image, $repeat) {
    background: {
        color: $color;
        image: url($image);
        repeat: $repeat;
    }
}

/** 引用 mixin **/
.box div {
    @include border-set(red, 2px);
    @include background-set(green, "../img_tree.png", 'no-repeat');
    letter-spacing: 0.5em;
}

/** 编译后（ 转为 CSS 语法输出 ） **/

.box div {
  border-color: red;
  border-width: 2px;
  border-style: solid;
  background-color: green;
  background-image: url("../img_tree.png");
  background-repeat: "no-repeat";
  letter-spacing: 0.5em; 
}

8. 继承

「 繼承 」 是一個滿實用的功能，若想讓多個 class 使用相同樣式，就可使用 直接繼承過來，減少重複編寫的時間，如下：@extend @extend

/** 编译前( sass语法 ) **/

%msg-style {
    display: block;
    flex-wrap: wrap;
    background: #d9d9d8;
    color: #000;
}

.msg {
    @extend %msg-style;
}

.msg-success {
    @extend %msg-style;
    background: #34fc6d;
}

.msg-error {
    @extend %msg-style;
    background: #fc253e;
}

/** 编译后（ 转为 CSS 语法输出 ） **/

.msg, .msg-success, .msg-error {
  display: block;
  flex-wrap: wrap;
  background: #d9d9d8;
  color: #000; 
}

.msg-success {
  background: #34fc6d; 
}

.msg-error {
  background: #fc253e; 
}

多重扩展，可引入多个选择器

同一个选择器，可以使用 扩展多个选择器，这代表它继承了扩展选择器的样式，如下：@extend

/** 编译前( sass语法 ) **/

.error {
    background-color: #fa945c;
}

.notice {
    font-size: 16px;
    font-family: sans-serif;
    font-color: #000;
}

.seriousError {
    @extend .error;
    @extend .notice;
    background-color: #ff1b1b;
}

/** 编译后（ 转为 CSS 语法输出 ） **/

.error, .seriousError {
  background-color: #fa945c; 
}

.notice, .seriousError {
  font-size: 16px;
  font-family: sans-serif;
  font-color: #000; 
}

.seriousError {
  background-color: #ff1b1b; 
}

上面几个状况，应该是比较常见的功能，应该满足够使用了，若想了解更多，可以直接参考 SASS 官方。@extend

9. 操作符

SassScript 支持对数字的运算，如：（加法 、减法 、乘法 、除法 、取模 等 .. ），来看一下代码，如下：++*/%

/** 编译前( sass 语法 ) **/

div a {
    $width: 500px;
    width: $width/2;             // 使用变量，和 / 
    font: 16px/10px;             // 原生CSS，不作为除法
    height: (250px/2);           // 使用了(), 和 /
    margin-left: 10px + 8px/2px; // 使用了 +, 和 /
}

/** 编译后（ 转为 CSS语法输出 ） **/

div a {
  width: 250px;
  font: 16px/10px;
  height: 125px;
  margin-left: 14px; 
}

简单来说，就是增加了运算功能，有需要也可进行使用。

这边也有另一个范例，如下：

/** 编译前( sass语法 ) **/

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 700px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 400px / 960px * 100%;
}

/** 编译后（ 转为 CSS 语法输出 ） **/

.container {
  width: 100%; 
}

article[role="main"] {
  float: left;
  width: 72.9166666667%; 
}

aside[role="complementary"] {
  float: right;
  width: 41.6666666667%; 
}

10.结论

如果能看到这边，首先给自己掌声！ 相信对SASS教程，也有程度的认识了！

接着，可以找个小案子，来自己练习，你会发现，CSS 结合了 JS 特性，开发起来会变得更加快速（省了很多代码 ? ? ）

SASS 在入门安装+下指令时，会有些要适应，但这边搞定后，会发现后面语法观念，其实很容易上手，优化了传统 CSS 开发上的许多不变。

希望这篇 SASS教程 文，有帮助到需要的捧有们，我们下篇文章见

原文链接：https://www.itaoda.cn/blog/10219.html，转载请注明出处。