初识 Sass | SCSS

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 中文网

← 上一篇 下一篇 →
Comments

添加新评论

已有 10 条评论

没接触过这东西,不过看完文章觉得很叼啊,还有这个文章目录也叼

熊猫小A 熊猫小A 回复 @JIElive

PC端目录处理得一般般 移动端跟你的PC端挺像的~

虽然接触过挺多的Sass的项目,但是还是习惯写CSS。

熊猫小A 熊猫小A 回复 @广树

还好我只是一个兴趣使然的小白,对这些新东西挺愿意尝试的

新主题赞!

嘿嘿嘿 一顿猛敲键盘 意外发现竟然写成了主题!

BigCoke BigCoke 回复 @熊猫小A

原来这就是传说中的猴子和打字机

熊猫小A 熊猫小A 回复 @BigCoke

可不就是嘛

熊猫小A 熊猫小A 回复 @七越

又来装萌新了