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%;
}

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