CSS 太散了,散容易乱,每个规则对应的选择器
,单纯从代码上看,其本身都是孤立的,没有父子关系,也就意味容易产生大量重复代码,比如本文后面段落『两段代码示例』中不断重复的 .cover .container
。
假设,我们现在要改名称,将 .cover
改为 .my_cover
,那么改动的可不是一个地方,而是很多个地方。如果涉及到代码量不少,而且项目内的文件数不少,那么纯粹的 CSS 在 coding 以及后期维护时,就很低效了。
SCSS 由此而生,你可以把它当做更加高阶、带有逻辑管理(归档)功能的 CSS。但是,最终,它也是要被转化为(也就是编译
) CSS 文件,才能正常工作。
因为浏览器默认支持的是 HTML + CSS + Javascript 这样的技术线,一般来说,如果使用了其它技术线的,最终都要重新编译回 HTML + CSS + Javascript
才能获得浏览器原生的支持。
FirstWeb 中对应的网站目录下 (『 2.3 Jade 与 SCSS』),有一个 SCSS 文件 style_in_scss.scss
,对应的 style_in_scss.css
则是 SCSS 编译后成为 CSS 的文件。
具体请看 FirstWeb 中 style_in_scss.scss
的源码,你应该很容易理解 SCSS 相对于 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;
}
.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;
}
}
}
}
}
选择器
产生的『 Namespace(空间)』
但也有前提,在久远的时代,如果没有一个 Code Editor 的协助,SCSS 在编码的过程中,会有很多副作用,比如『代码片段如何确保闭合』。就像在 FirstWeb
中,代码块的闭合补全、缩放展开是没有支持的,而在 Atom 中就有这些支持。
SCSS 是追求 更高效率 CSS 的自然产生,它是一个 CSS 的效率工具。
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 整理
的技术,往上一点是 引入变量
。再复杂的,可以先不用了解,等真有一天自己希望解决什么问题时候,再去了解就好了。
如下所示,两条规则固然可以合并,但是不合并,如果方便后续自己代码逻辑书写,也是非常可取的做法:
.container .sub_container{
color: red;
}
.container .sub_container{
.title {
font-size: 16px;
}
}
我们可以将第一层的选择器
,当做一个空间(Namespace),以形成区分度,而譬如 title
这种相当通用的关键词,很难形成区分度,很容易跟其子规则
的定义产生冲突,这种情况是我们应该避免的。
/***** title、name、image 类似这些关键词其实都很通用******/
/* .title 作为单独的一个规则名(选择器) ,是不推荐的,因为后续其它选择器的一个子规则也以 .title 为名(这很常见),就会从这里继承 (这并非我们所期望的结果) */
.title {
color: red;
font-size: 18px;
}
/* 像 title 这种通用的关键词,应该作为其它区隔度很明确的子属性,如下所示: */
.caption_container{
font-size: 12px;
.title {
color: #333;
}
}