Sass基础入门

427 阅读4分钟

为何有 Sass

作为前端开发人员对于 CSS 应该不陌生吧,大多数前端开发对 CSS 都是既爱又恨,爱它可以通过简单的代码使页面美化,恨他是因为随着项目的复杂性越高,它的可维护性就越差。作为开发人员,CSS 更像是一门设计类语言而非开发类语言。比如:

  • 缺少模块化机制
  • 缺少变量机制,使得滋生很多重复的代码
  • 嵌套层级写法非常痛苦
  • 复用困难

因此,有需求就会有市场,Sass 因此应运而生。

Sass 是世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言!

从官方的解释不难看出,Sass 是一门 CSS 的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。(这里还可以去了解下 CSS 预处理技术~)

接下来就简单介绍下 Sass 的基本使用~

变量机制

Sass 允许是用变量,所有变量以 $ 开头。如果变量需要镶嵌在字符串之中,就必须需要写在 #{} 之中。

$main-color: #333;
$side: left;

.div1 {
    background: $main-color;
    border-#{$side}-radius: 5px;
}
.div2 {
    background: $main-color;
}

使用变量定义的好处显而易见,一是可以把调用频繁的变量属性放置单一文件夹,方便多人协调开发,二是便于统一项目样式风格。

嵌套写法

没有嵌套写法应该是 CSS 最蛋疼的点了,来看看之前是怎么写 CSS 的:

.container .content .left-side .name {
    font-size: 20px;
}
.container .content .left-side .age {
    font-size: 14px;
}

有了 Sass 之后这就变得很简单了,避免了大量重复的选择器:

.container {
    .content {
        .left-side {
            .name {
                font-size: 20px;
            }
            .age {
                font-size: 14px;
            }
        }
    }
}

模块机制

CSS 中有定义一个模块化 @import 规则,不过因为其需要执行到才会去下载所需代码,实际使用时会引起页面卡顿。Scss 对其进行了扩展,允许其导入 Scss 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令(mixin)都可以在导入的文件中使用。

@import "common";
@import "popup";
@import "module_a";

@import 使得开发时 CSS 和 html 完全分离,通过一个文件引入 CSS 即可,修改样式也不需要修改到 html 文件,项目也不会随着业务复杂度增加而变得更加复杂,只需要增加、修改、删除对应功能模块就行。

Mixin

Sass 提供了一种混合指令,可以将公共样式片段抽离放在单独文件中,便于多处复用。

在没有 Sass 前我们部分 CSS 是这样的:

.div1 {
    background: red;
    border: 1px solid #333;
    border-radius: 2px;
}
.div2 {
    background: blue;
    border: 1px solid #333;
    border-radius: 2px;
}

如果想抽离公共样式片段只能这样做:

.div1,
.div2 {
    border: 1px solid #333;
    border-radius: 2px;
}
.div1 {...}
.div2 {...}

这种写法每次想重复利用该样式片段都得在其后面加上选择器,而且相同选择器有不同的样式片段,随着项目复杂度增强,其维护成本极高。(如果想再优化写法,可以将公共部分抽成一个新的类,但会增加类名复杂度)

有了 Sass 的 @mixin 之后就简单了许多:

@mixin grey-border-radius {
    border: 1px solid #333;
    border-radius: 2px;
}
.div1 {
    @include grey-border-radius;
    background: red;
}

不仅如此,@mixin 还可以指定参数:

@mixin ml($value: 10px) {
    float: left;
    margin-left: $value;
}
.div1 {
    @include ml(20px);
}

继承机制

Sass 还提供了继承机制,允许一个选择器继承另一个选择器。

假如有一个消息框,除了基础样式外,其还有成功和失败样式,用 CSS 写法是这样的:

.msg {
    border: 1px solid #e3e3e3;
    background: #dff0d8;
}
.msg-success {
    color: #4cae4c;
}
.msg-error {
    color: #d43f3a;
}

如果以上定义样式,需要在每个标签都多加一个 .msg 的类名,使用 Sass 继承机制后:

.msg {
    border: 1px solid #e3e3e3;
    background: #dff0d8;
}
.msg-success {
    @extend .msg;
    color: #4cae4c;
}
.msg-error {
    @extend .msg;
    color: #d43f3a;
}

其编译后:

.msg, .msg-success, .msg-error {
  border: 1px solid #e3e3e3;
  background: #dff0d8;
}
.msg-success {
  color: #4cae4c;
}
.msg-error {
  color: #d43f3a;
}

不难看出其实也可以用 @mixin 实现相同的效果,但不同的是:继承拷贝的是选择器,而混合拷贝的是样式片段。关于两者之间如何选择官方文档也有说明,详细戳这里

自定义函数

Sass 提供的函数和 JS 的函数差不多,主要用于一些计算或者结合控制语句使用。

比如移动端开发时可以封装成一个函数用于把 px 转成 rem:

$baseFontSize: 20;
@function px2rem($val) {
  @return $val/$baseFontSize + rem;
}

.big-text{
    font-size: px2rem(30);
}

小结

本文主要阐述了 Sass 基本的入门用法,用于日常开发足矣。如果想更加深入了解 Sass 的高级用法,可以参考官方中文文档~