CSS 是很繁琐的。一遍遍地重写类名,一遍遍地重写冗长的属性,真的让人心生厌恶。CSS 作为样式表,不是一种编程语言,你可以用它描述一个网页,但是不能用它编程。
但好在,现在我们已经有了许多相对成熟的解决方案,其中一种就是这篇文章要讲到的 Sass/SCSS。
这是什么?
Sass/SCSS 是一种 CSS 的扩展语言,一种预处理器,你可以用它们快速编写样式,然后再编译为浏览器可以解析的标准 CSS 代码。
Sass 提供了诸如变量、嵌套、引入、混合器、继承器等等优秀的特性,使网页设计进行起来更加快速、顺手。但 Sass 使用缩进分块,用起来不甚舒服。
SCSS 是 Sass 的后续升级版本,它完全兼容 CSS 语法,也是就是说,任何合规的 CSS 文件把后缀改为 .scss 后也是合规的 SCSS 文件,支持使用 {} 分块。
上手
注意,本文语法基于 SCSS,也就是采用 {} 分块。这样更符合我多年的习惯。
变量
这是 SCSS 的一个重要特性。CSS 不能使用变量这个问题已经为人诟病很久了,新标准中终于带来了 var()
语法以提供变量支持,但是兼容性尚较差。在 SCSS 中使用变量很简单:
// 定义一个变量
$textColor: #333;
// 运用一个变量
body{
color: $textColor;
}
在 {} 块中定义的变量只能在该块内使用,外部定义的变量则可作用于全部范围,这与 C 语言的变量作用域同理。SCSS 变量可以存储的东西很丰富,除了颜色,还可以这样:
$plainFont: "Myriad Pro", Myriad, "Helvetica Neue", Helvetica, "Liberation Sans", Arial, sans-serif, sans-serif;
在 SCSS 中,下划线与中划线等价,$link-Color
与 $link_Color
等价。
嵌套
这是另一个令人兴奋的特性!想象一下平时我们写的 CSS 代码:
#content article{}
#content article p{}
#content article p a{}
是不是觉得改变世界的热情已经消失一些了…… SCSS 支持嵌套规则,上面那段代码可以这么书写:
#content{
// some attr
article{
// some attr
p{
// some attr
a{
// some attr
}
}
}
}
在大量减少工作量的同时,你的代码可读性也大大提高。另外,SCSS 也支持伪类与伪元素的嵌套,这就涉及父选择器 &
了。例如一段 CSS 代码:
.btn{}
.btn.large{}
.btn.large.pushed{}
.btn.large.pushed:hover{}
.btn.large.pushed:hover::before{}
在嵌套中使用 &
指代父元素,则在 SCSS 中应该如下书写:
.btn{
// some attr
&.large{
// some attr
&.pushed{
// some attr
&:hover{
// some attr
&::before{
// some attr
}
}
}
}
}
当然,子组合选择器和同层组合选择器:>
、+
以及 ~
同样支持。以上介绍均属于选择器嵌套,SCSS 嵌套的另一个高级用法是属性嵌套,例如:
.border{
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
这段代码会被编译为:
.border{
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
是不是很酷?注意,用于嵌套的属性前缀后面需要加一个 :
。
引用 SCSS 文件
你很可能不愿意把整个项目的 CSS 都写在一个文件里,这样实在难以维护。SCSS 支持将代码写在不同文件里然后在别的文件里引用。若当前有目录树如下。
style
|-- style.scss
|-- var.scss
|-- parts
|-- _sidebar.scss
|-- _header.scss
|-- _article.scss
在 style.css 中,你可以使用 @import
命令导入其他代码文件。
@import "var";
@import "parts/sidebar";
@import "parts/header";
@import "parts/article";
你或许已经注意到了,导入时文件名无需写全。另外一点需要注意,SCSS 规定以下划线开头的文件不会被单独编译,而会直接被包含到生成的最终 CSS 中。
混合器
混合器使你可以重用代码片段,减少工作量。例如一些常用样式的组合,可以直接定义为一个混合器,然后在代码中引用。
@mixin coverBg{
background: {
size: cover;
repeat: no-repeat;
position: center;
color: #12121c;
}
}
然后在某处引用
div.banner{
@include coverBg;
}
最后的 CSS 是:
div.banner{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #12121c;
}
混合器相当于普通编程语言中宏的概念,你还可以给混合器传参:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
使用时只需要这样:
a {
@include link-colors(blue, red, green);
}
其结果是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
继承
继承同样可以减少重复工作,它使一个选择器可以直接继承另一个选择器的所有样式。例如:
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
注意,.seriousError
不仅继承了 .error
的样式,任何与 .error
相关的组合选择器样式也会被继承。
如何使用 SCSS 开发
安装
以上是 SCSS 最常用的一些特性,更多特性没必要一一列举,因为反正也记不完,用到再说。既然 SCSS 这么棒,当务之急是在自己的项目中用上它。
首先需要安装 Ruby,如果你使用 Mac,则自带 Ruby;如果是 Windows,下载 Ruby 后安装。然后修改一下 gem 镜像。
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l
# 确保只有 gems.ruby-china.com
然后安装 Sass 与 Compass:
gem install Sass
gem install compass
你可能需要 sudo
权限。
命令行使用
//单文件转换命令
Sass input.scss output.css
//单文件监听命令
Sass --watch input.scss:output.css
//如果你有很多的Sass文件的目录,你也可以告诉Sass监听整个目录:
Sass --watch app/Sass:public/stylesheets
VS Code
也可以配合 VS Code 插件 Live Sass Compiler 来使用,好处是自带了 autoprefixer,而且可以实现每次保存后立即重新编译。
插件具体配置见:setting docs。
总结与其它
会写这篇文章是因为最近考完试了想要学点新东西,正好有写个新主题的念头,随即动手。于是,新主题的大部分样式都是使用 SCSS 写的。
另外,新主题 VOID 已经发布,详见 AlanDecode/Typecho-Theme-VOID。
本文参考了 Sass 中文网