初见Sass-便捷的CSS预处理器

发现自己又找到一本关于前端实践的优质开源书《3周3页面》。作者通过实际项目介绍了前端必备的一些工具,教读者一步一步实现设计,而且步骤非常详细。写下这篇博文为止,我已经完成了第一个项目。在第一个项目中,作者向读者推荐了Sass,并且号称“一旦你开始使用它,你就再也回不去了。”

什么是Sass

为了给 CSS 加入编程元素,人们发明了Sass。Sass 是一个 CSS3 的扩展语言,它提供了嵌套样式,变量定义,扩展,mixin等丰富的特性,使得编写样式更加容易,节省了开发者的时间。

Sass基础语法

这里只记录我觉得比较关键的语法作为备忘。可以查看 sass十分钟入门 或者 SASS用法指南 以较为全面地入门。

  • 变量:以$开头。如果变量需要镶嵌在字符串之外,需要写在#{}中。
  • 嵌套:用&引用父元素。
  • 继承:使用@extend命令。
  • Mixin:使用@mixin命令定义一个代码块,使用@include命令调用。可以指定参数和缺省值。
  • 插入文件:使用@import命令。
  • 自定义函数:使用@function@return
  • 此外支持条件语句和循环语句。

WebStorm中使用Sass

注意,本节内容针对 OS X 环境。可能部分内容也兼容其他平台,但我没试过。

WebStorm 支持 Sass 的自动编译。在 WebStorm 的 Preferences 中,Tools 下选择 File Watchers。配置 Sass 和 SCSS(最新版的 Sass 后缀)需要有相应的 Program。

因为 Sass 依赖 ruby,所以要先安装 ruby。不过 OS X 好像自带 ruby(至少我没有什么时候安装过的印象…)。之后建议安装 Compass:sudo gem install compass,Sass 和 SCSS 的 Program 会被一并安装,WebStorm 也会检测到,之后点击 OK 即可。

之后,WebStorm 会自动监测 Sass 文件的改动,并时刻编译为同名 CSS 文件,保存在同一文件夹下,非常方便。

Sass实现媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 定义两个 break-point
$break-small: 320px;
$break-large: 1024px;
// 定义一个 mixin,接收三个可能的参数
// 分别代表不同的设备——手机、平板和桌面显示器
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: $break-small) { @content; }
}
@else if $media == medium-screens {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { @content; }
}
@else if $media == wide-screens {
@media only screen and (min-width: $break-large) { @content; }
}
}

使用时:

1
2
3
4
5
div{
@include respond-to(medium-screens) {
//...
}
}

这种方式使用起来更方便,也便于后期统一修改变量的具体数值。

参考资料

《3周3页面》的作者同样推荐了 Compass。这是一个使用了 Sass 的库,将很多常用样式打包成了一些模块以供使用。因为安装时出现了一些我还没解决的 error,我还没有使用过。可以查看 Compass用法指南 以获得更多了解。

此外,推荐 SASS基础——十个常见的Mixins。这篇文章总结了一些常用的 Mixin,更重要的是,通过这些Mixin,对 CSS 可以获得更深入的理解。