SASS 快速上手

之前就知道有 CSS 预处理器(css preprocessor)这么个概念,但是却一直从未上手实践过,现在看来自己专业技能进步的如此缓慢,嗯,一定是实践能力太弱导致的。

CSS 其实只是个设计工具,个人感觉和编程还是有点距离的,难怪后端程序员们看到这个会觉得处理这些是件很麻烦的事情。只能一行行的如实描述,没有变量、常量、编程语法等,有时候真的感觉难以组织和维护。比如我们项目中产品的迭代,有时候用户需求改变之后,产品要快速的做出响应,有时样式文件做出大的改动,在后期代码的维护上就比较头疼了,因为代码本身耦合度就较高。

这时 CSS 预处理器就应运而生了。CSS 预处理器定义了一种新的语言将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护。

在本地安装好之后,顺着 SASS 官方文档,她的 Features 足以让我惊呆!下面就来挨个做个简单亮相吧!

http://sass-lang.com

一、 SASS

SASS - Syntactically Awesome Stylesheete
它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的 CSS 文件。

二、 安装&使用

SASS 是用 Ruby 写的,所以得先安装 Ruby。OS X 和 Linux 用户可忽略此步。

1
2
3
gem install sass    
sass style.scss
sass style.scss style.css

安装好之后,创建普通的文本文件 style.scss,根据官方的上手指南先写入简单的 Sass Stylesheet。

1
2
3
4
5
/* style.scss */    
#navbar {
width: 80%;
height: 23px;
}

官方首页的 demo 里,你会发现有种语法,表面在我看来就是 .scss.sass,扩展名的不同,然后就是书写格式的差异,介绍里是这样说的“.scss 这种扩展名对应的语法一般用的最多,她是 CSS3 的一个超级集合,所以说对 CSS3 的支持也是比较良好”,而“.sass 我猜测应该是 SASS 刚推出时默认采用的吧,她的语法就我目前看来主要体现在书写格式上,只用行缩进来指定代码块,没有和原生 CSS 所相近的 {};”,下面就以 SCSS 语法为主,介绍一些令我和小伙伴们都惊呆了的特性!当然了,这种语法只是在书写格式上有区别,功能上完全一样,选个自己喜欢的开始吧!

三、特性概览

Nesting - 嵌套

原生 CSS 在嵌套时可不能省事儿,一层层一行行都得如实书写,而 SASS 允许你在父级里进行嵌套书写,非常省气力。注意你的括号和缩进!

1
2
3
4
5
6
7
8
9
10
#navbar {
width: 80%;
height: 23px;

ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}

引用父级,用到了 SASS 约定好的特殊字符&

1
2
3
4
5
a {
color: #ce4dd6;
&:hover { color: #ffb3ff; }
&:visited { color: #c458cb; }
}

Variables - 变量

SASS 中允许使用变量,她可以用来定义 CSS 属性。

1
2
3
4
5
6
7
$main-color: #ce4dd6;
$style: solid;

a {
color: $main-color;
&:hover { border-bottom: $style 1px; }
}

Interpolation - 嵌入

在 SASS 中定义的变量不仅可以用在属性值里,还可以用#{}嵌入在字符串里写在选择器下。这里需要注意的是对#{}的闭合要仔细检查,难免会和选择器自身的混淆!

1
2
3
4
5
6
7
8
$vert: top;
$horz: left;
$radius: 10px;

.rounder-#{$vert}-#{$horz} {
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
border-#{$vert}-#{$horz}-radius: $radius;
}

Operations - 计算

支持标准的数学运算 (+, -, *, /, and %)

1
2
3
li {
width: $navbar-width/$items - 10px;
}

Functions - 函数

粗略的浏览了一遍,这些都是处理系列颜色值的函数,有了这些你也可以快速的生成系列颜色。难怪看到人家 UI 组件里的颜色过渡,渐变,同色系颜色的取值上感觉很舒服,有了这些函数让你能够快速的处理出来系列颜色,即使你不是很懂色值的微调。不过我相信,在你看到函数里的那些RGB,HSL,alpha,rgba…肯定还是会很头疼的 >_<,就简单的介绍几个函数,实在不敢继续深究了。

1
2
3
4
5
6
7
8
9
10
rgb(26, 188, 156);
// 根据给定的rgb值,计算出一个十六进制颜色值 #1abc9c
rgba(blue, 0.8);
// rgba(0, 0, 255, 0.8),将一个颜色根据透明度转换成rgba颜色
lighten(#1abc9c, 10%);
// #28e1bd,lighten和darken都是给颜色亮度值做调整
grayscale(#1abc9c);
// #6b6b6b 变成灰色咯
invert(#1abc9c)
// #e54363 根据颜色中的R、G、B单独进行反相,然后合并到一起

Mixin

这算是 SASS 中的一大强有力的亮点,我个人理解她是一个可定义的代码块,以便用来重复使用。下面这里示例写的有点水啊 :-\

1
2
3
4
5
6
7
8
9
10
11
@mixin border {
$color: #1abc9c;
$style: solid;
$width: 1px;
$radius: 2px;

border-color: $color;
border-style: $style;
border-width: $width;
border-radius: $radius;
}

Arguments - 参数

上面那个示例中,在自定义代码块时,起处定义了几个变量,是不是看起来略显麻烦了,而这而所介绍的功能应该就是 Mixins 的强大之处了。再来改进一下

1
2
3
4
5
6
7
8
@mixin border($color, $style, $width, $radius) {
border-color: $color;
border-style: $style;
border-width: $width;
border-radius: $radius;
}

#box { @include border(#1abc9c, solid, 1px, 2px); }

@import

这个功能其实在 CSS 中就有用到,引入外部文件,不过在 SASS 中引入功能更加强大!
比如将 module 组件以单独的命名的 _clearfix.sass 文件存放

1
2
3
@import "border"; //将代码块存为_border.sass,然后引入
@import border.scss //直接以文件名形式引入
@import style.css //CSS文件的引入

Comment - 注释

  • SASS 支持标准的 CSS 注释/* comments */
  • 单行注释// comments
  • 重要注释/*! comments */在/*后面加!,表示这是”重要注释”。即使是压缩模式编译,也会保留这行注释

Output Style - 编译输出

SASS 给出了四种编译风格,SASS - Output Style

  • :nested 标准的嵌套缩进
  • :expanded 没有嵌套缩进
  • :compact 每个选择器的样式,均以单行形式输出
  • :compressed 整个样式文件只有一行,常用于生产环境
  • sass --style expanded style.sass style.css

高级功能

还有些更高级的功能,比如循环、条件语句,自定义函数之类的高级功能就先不做介绍了,等我将以上这些基础功能都实践过之后,一起起来进阶篇,THX :-)

开发工具

现在手上的开发工具还是以 jetbrains家的为主。家里笔记本屏幕小、配置低,主要用 sublime text 2,写文章都是在家里,本文里的示例也都是在这个下面编辑的,以下就简称ST2吧。

我用的版本是 2221,默认还不能支持 SASS 文件的语法高亮,需要安装插件,分别是 sass,sass build。安装好之后,就有代码高亮支持,若还是没看到效果,请手动为当前 sass 文件指定syntax,对应的菜单位置:“View - Syntax - Sass”。

另外就是在ST2中进行编译,对应的菜单位置:“Tools - Build”,快捷键为“Ctrl+B”,这时你在 Console 中就能看到编译状态,默认在当前目录生成一个编译后的同名 CSS 文件。

overwrite D:\sass/style.css
[Finished in 1.2s]

果然是神器啊,之前一直都在“命令提示符”里敲命令编译的这种事儿,我会随便乱说?

本文终于可以暂告,每天都说抽时间写一点,结果足足拖了两周之多,该狠狠的扇自己了!里面主要还是以官方文档为主,虽然英文的看起来吃力点,那就手头常备字典咯,遇到代码看不明白的,就再仔细去读一遍说明,这样以来能更好的理解。

工具有很多个,为了提高自己的产出而花时间来学习,还是很有必要的!让自己的代码数量在增加的同时,更应该提高质量,书写优雅的代码,带着一颗热忱的心。

我是 Harry,晚安!