前端开发
by smallnest

Sass基础

目录 [−]

  1. 预处理
  2. 变量Variable
  3. 嵌套Nesting
  4. 分部文件Partial
  5. 导入Import
  6. Mixins
  7. 扩展/继承Extend/Inheritance
  8. Operator

翻译自Sass官方文档: Sass Basics.

在使用Sass之前， 你需要在你的项目中设置一下。 如果你只是想浏览本页内容，没问题，继续。 但是还是强烈建议你首先安装Sass。 看这里的文档你可以了解怎么设置Sass。

预处理

Css自己本身很有趣，但是样式单变得越来越大，越来越复杂， 变得很难维护。 这真是预处理器要做的。 Sass让你使用CSS不存在的特性，比如变量，嵌套，混合(mixin)， 继承等其它90个好的玩意来让CSS编写变得更有趣。

一旦你开始使用Sass, 它会预处理你的Saa文件， 把它存为一个正常的CSS文件， 用在你的网站上。

变量Variable

变量是在样式单中重用信息的一种方式。 你可以存储颜色，字体设置 或者其它的你要重用的CSS值。 Sass使用$标记变量， 这里是一个例子：

1
2
3
4
5
6
7
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

当处理Sass时， 它得到变量$font-stack和$primary-color的值， 并用它们替换CSS中的变量为正常的CSS的值。 当处理已命名的颜色时这个功能相当强大，可以让CSS保持一致。

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

嵌套Nesting

当写HTML代码时， 你可能注意到它有一个清晰的嵌套和可视化的继承关系(意者按：DOM)。 而CSS缺乏这个功能。

Sass可以让你嵌套你的CSS选择器(selector)， 就像HTML的可视化继承关系一样。注意过度的嵌套也可能导致过度设计的CSS。 这会很难维护，通常被认为的差的实践。

考虑到这一点， 这里是一个站点导航的典型的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

这里的ul,li,a选择器都嵌套在nav中。 这是一个极佳的组织CSS的方式， 让CSS变的更可读。 当你产生CSS时你会得到：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

分部文件Partial

你可以创建部分的Sass文件，这些文件包含CSS的小的可以插入到其它Sass文件的片段。这又是一个极佳的模版化CSS的方式， 可以更好的维护CSS。一个分部文件的名字以下划线开头比如_partial.scss. 下划线让Sass知道这个文件是一个分部文件，不会为它单独产生一个CSS文件。可以使用@import导入分部文件.

导入Import

CSS有一个导入(import)选项。 它可以让你的CSS文件分割成一些小的更易维护的文件。 唯一的缺点是你需要在CSS使用 @import， 它会产生另外一个HTTP请求 (?)。 Sass在构建顶层CSS时不会请求新的HTTP request，而是得到你要引入的文件并把它插入到当前文件中。所以你只会得到唯一一个CSS文件.

来看两个文件 _reset.scss and base.scss. 我们会导入 _reset.scss 到 base.scss.

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-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

注意在文件base.scss中你使用的是@import 'reset'; 当你导入一个文件时你不必包含后缀 .scss. Sass足够聪明，会正确工作. 当产生CSS文件后，你会得到:

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

Mixins

有些东西在CSS中编写起来相当乏味， 尤其是当许多供应商的前缀 （ vendor prefixes， 指-webkit-XXXX等）存在时。 mixin可以为CSS声明分组， 可以在站点中重用。你甚至可以传递给它一些参数， 这相当灵活. mixin一个很好的应用就是处理浏览器变种的前缀。 请看 border-radius的例子.

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

你可以使用 @mixin创建mixin， 并赋予一个名字. 这里我们命名这个mixin 为border-radius. 我们在圆括号里使用变量作为参数， 这样我们可以传入一个我们想要的值。 当你创建了你的mixin, 你可以用@include使用它作为CSS声明。 @include紧跟着 mixin的名字. 当生成CSS后， 生成的CSS会是这样:

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

扩展/继承Extend/Inheritance

这是Sass最有用的特性之一。使用 @extend可以让一个selector共享另外一个selector的CSS属性。 它可以让你的Sass遵循DRY原则(Don't repeat yourself). 下面的例子中我们会建立一个系列消息类如 error, warning 和 success.

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

上面的代码允许你获取.message的CSS属性并将它们应用到.success, .error和 .warning上. 魔法在生成的CSS上呈现, 它帮助你避免在一个HTML元素上写多个类名。 结果看起来就像:

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

Operator

在CSS中的数学运算很有帮助. Sass可以使用标准的数学运算 +, -, *, /, and %. 这个例子我们会计算aside & article的宽度.

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

我们已经创建了一个简单的960px流式表格. Sass运算符可以使用像素值并轻易地把它转为百分比的表示。产生的CSS如下:

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="complimentary"] {
  float: right;
  width: 31.25%;
}