Sass基础

在前端开发中,类似Less,Sass这样的预处理器,变得越来越常见,由于CSS发展的制约,使得CSS开发时,当代码量越来越大,项目变得难以管理和维护。
Sass可以让你使用一些在CSS中没有的特性,比如变量,nesting,mixins,继承和其他好的特性,让你编写CSS变得更加方便。

所以,学习并使用一款CSS预处理器也渐渐变成一个前端工程师必不可少的技能。在多个预处理器中,我选择了Sass。

一些基础

Sass有两种语法,使用哪一种取决于个人爱好,只是两种格式需要对应不同的后缀。

  1. SCSS,本教程使用这个语法。这是一个CSS语法的扩展,这意味着,在CSS中可以使用的功能,在SCSS中都是同样的功能。同时,SCSS支持所有CSS hacks和特定浏览器语法。详细情况在 这里
  2. SASS,这是比较老的语法,使用缩进代替了大括号,使得写起来更加快捷,看起来也更清爽

开始使用

当安装好Sass之后,你可以使用命令 sass --watch app/stylesheets_dirctory

使用变量

你可以使用$来定义变量

1
2
3
4
5
$font-stack: Helvetica, sans-serif;
body {
font: 100% $font-stack;
}

经过Sass编译之后,输出的文件是这样的:

1
2
3
body {
font: 100% Helvetica, sans-serif;
}

这样的的话,你就可以在整个项目中共享一些同样的变量,而不必每次重新定义,当需要做更改的时候,只有改变变量的值,在重新编译之后,使用这个变量的地方就自动更新为新的值了。

嵌套(Nesting)

在HTML里面,各个元素是可以嵌套的,而在CSS里,目前还不可以原生支持这样的功能,Sass就能帮我们实现。

1
2
3
4
5
6
nav {
font-size: 1.5em;
li {
display: inline-block;
}
}

经过编译后:

1
2
3
4
5
6
nav {
font-size: 1.5em;
}
nav li {
display: inline-block;
}

Import

Sass提供了Import的功能,你可以把Sass写到多个文件,然后自由组合他们,然后编译的时候,他们会自动合并到单个文件里。

1
2
3
4
5
6
7
8
9
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
1
2
3
4
5
6
7
8
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

在编译之后:

1
2
3
4
5
6
7
8
9
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

Mixins

当前的浏览器,有的特性可能需要你写不同的前缀,比如 -webkit -moz -ms,Mixins提供了一个快捷的方法使你从写这些烦人的前缀中解放出来。你可以提供多个value值来定制自己的Mixin

1
2
3
4
5
6
7
8
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }

在编译过后:

1
2
3
4
5
6
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

扩展和继承

这可能是SASS里最有用的一个功能,它让你的CSS拥有了继承的能力,使用@extend这个关键字继承一个CSS集合,解决了很多不必要的重复。直接看官方的例子吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.warning {
@extend .message;
border-color: yellow;
}

在编译之后:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}

运算符

Sass拥有数学计算的功能,例如+, -, *, /, %

1
2
3
4
5
6
7
8
9
10
11
12
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}

在编译之后:

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}

作者注:这篇文章大部分内容来自官方入门指南,需要更多内容可以直接看官方文档。