为何有 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 的高级用法,可以参考 Sass官方中文文档。