使用 SCSS 来代替 CSS

为什么要使用 SCSS

CSS 太散了，散容易乱，每个规则对应的选择器，单纯从代码上看，其本身都是孤立的，没有父子关系，也就意味容易产生大量重复代码，比如本文后面段落『两段代码示例』中不断重复的 .cover .container。
假设，我们现在要改名称，将 .cover 改为 .my_cover，那么改动的可不是一个地方，而是很多个地方。如果涉及到代码量不少，而且项目内的文件数不少，那么纯粹的 CSS 在 coding 以及后期维护时，就很低效了。
SCSS 由此而生，你可以把它当做更加高阶、带有逻辑管理(归档)功能的 CSS。但是，最终，它也是要被转化为(也就是编译) CSS 文件，才能正常工作。
因为浏览器默认支持的是 HTML + CSS + Javascript 这样的技术线，一般来说，如果使用了其它技术线的，最终都要重新编译回 HTML + CSS + Javascript 才能获得浏览器原生的支持。

在 FirstWeb 中学习 SCSS

FirstWeb 中对应的网站目录下 (『 2.3 Jade 与 SCSS』)，有一个 SCSS 文件 style_in_scss.scss，对应的 style_in_scss.css 则是 SCSS 编译后成为 CSS 的文件。
具体请看 FirstWeb 中 style_in_scss.scss 的源码，你应该很容易理解 SCSS 相对于 CSS 的存在价值，为了方便纯文本的阅读，后面贴了两个来自于 FirstWeb 中的代码片段。

两段代码示例

原始的 CSS 代码(篇幅所限，具体参考 FirstWeb 对应站点目录):

.cover .container{
    position: relative;
    top: 45%;
    transform: translateY(-50%);
}

.cover .container h1{
    font-size: 36px;
}

.cover .container h2, .cover .container h3{
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 5em;
}

.cover .container .links{
    margin-bottom: 20px;
}
.cover .container .links a{
    text-decoration: none;
    color: #ffffff;
}

.cover .container .links a:hover{
    color: #ddd;
}

等效的 SCSS 代码(篇幅所限，具体参考『 Jade 与 SCSS』站点目录):

.cover {
    .container{
        position: relative;
        top: 45%;
        transform: translateY(-50%);
        h1{
            font-size: 36px;
        }
        h2, h3{
            font-size: 14px;
            font-weight: normal;
            margin-bottom: 5em;
        }
        .links{
            margin-bottom: 20px;
            a{
                text-decoration: none;
                color: #ffffff;
                &:hover{
                    color: #ddd;
                }
            }
        }
    }
}

SCSS 的好处

CSS 与 SCSS 两者相比，我们会发现 SCSS 本身的父子、层级关系更加明确，它的好处:

方便代码的整理
方便自然隔绝各自选择器产生的『 Namespace(空间)』

但也有前提，在久远的时代，如果没有一个 Code Editor 的协助，SCSS 在编码的过程中，会有很多副作用，比如『代码片段如何确保闭合』。就像在 FirstWeb 中，代码块的闭合补全、缩放展开是没有支持的，而在 Atom 中就有这些支持。
SCSS 是追求 更高效率 CSS 的自然产生，它是一个 CSS 的效率工具。

了解 SCSS

OK，这个时候，搜索引擎可以出马了，去了解更多关于 SCSS 的内容……
SCSS 也叫 SASS，你可能也会看到 LESS(另一种类型高阶的 CSS)，一般建议 SCSS 就 OK 了。
SCSS 让你的 CSS 代码变得更加清晰、整洁，而且 SCSS 还引入了变量的逻辑，比如一些常用的颜色、常用的字体大小、其它常用的规则可以作为变量被使用，这个是纯 CSS 中做不到的。

对了，在 SCSS 中，特别需要注意 & 这个符号，比如下面所示， &:hover 类似的用法，其实就是 在一个元素的 SCSS 规则内部，完成元素外部特定状态 的定义。

a{
    color: red;
    &:hover {
        color: blue;
    }
}

等价于:

a{
    color: red;
}
a:hover {
    color: blue;
}

SCSS 简单作为 CSS 整理 的技术，往上一点是 引入变量。再复杂的，可以先不用了解，等真有一天自己希望解决什么问题时候，再去了解就好了。

其它问题

1，未被解析的 SCSS，浏览器 (默认) 是不支持的。

2，一般来说 SCSS 是 CSS 的超集，纯 CSS 本身，也可以当做 SCSS。所以，写 SCSS 的样式的时候，层级不太严谨其实也没有关系。
如下所示，两条规则固然可以合并，但是不合并，如果方便后续自己代码逻辑书写，也是非常可取的做法：

.container .sub_container{
    color: red;
}
.container .sub_container{
    .title {
        font-size: 16px;
    }
}

3，避免通用关键词作为第一层的选择器。
我们可以将第一层的选择器，当做一个空间(Namespace)，以形成区分度，而譬如 title 这种相当通用的关键词，很难形成区分度，很容易跟其子规则的定义产生冲突，这种情况是我们应该避免的。

/***** title、name、image 类似这些关键词其实都很通用******/
/*  .title 作为单独的一个规则名(选择器) ，是不推荐的，因为后续其它选择器的一个子规则也以 .title 为名(这很常见)，就会从这里继承 (这并非我们所期望的结果) */
.title {
    color: red;
    font-size: 18px;
}

/* 像 title 这种通用的关键词，应该作为其它区隔度很明确的子属性，如下所示: */
.caption_container{
    font-size: 12px;
    .title {
        color: #333;
    }
}