使用 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 本身的父子、层级关系更加明确,它的好处:

  1. 方便代码的整理
  2. 方便自然隔绝各自选择器产生的『 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;
    }
}