《 网站 》里使用的 SASS 样式

在《 网站 》系列课程里，设计开发的页面需要的样式用的是 SASS 的形式创建的。这是一种更灵活的创建 CSS 样式的方法，你可以少写很多东西也可以重复利用一些东西。一旦你了解了 SASS，应该不会再直接写 CSS 样式了。在课程里，我们会用到几个 SASS 的重要特性。

组织

用 SASS 创建样式，组织这些样式的方法也很多。你可以创建一个主要的 SASS 样式文件，然后把其它的样式文件包含进来，项目的自动化任务会为你编译好一个普通的 CSS 文件，这个文件你可以直接用在你的项目里。

组织的方法一般像这样，比如你创建了一个主要的 SASS 文件，名字是 main.scss，它里面的内容像这样：

@import "variables";
@import "mixins";
@import "base";
@import "navbar";

这个主样式文件里不包含具体的样式，它可以作为一个入口文件，在这里你可以把其它的样式文件导入进来，项目的自动化任务会把所有的样式编译生成一个普通的 CSS 文件（main.css）。

导入其它的 SASS 样式文件用的是 @import，后面是文件的名字，这里没有具体指定文件的扩展名，也可以省略 SASS Partials 文件名前面的下划线。比如导入的 variables ，真正的文件名应该像这样：

_variables.scss

变量

在创建 CSS 样式的时候，有些属性的值是要重复使用的，比如一些特定的颜色，尺寸，字体等等。你可以把这些在不同的部分重复使用的值定义成一个变量，就相当于是你给一个值起了个名字。在用到这个值的时候，你可以直接用它的名字来代替具体的值，这样以后你只需要修改定义变量的地方，就会影响到所有使用了这个变量的地方。

定义一个变量：

$page-background: #f8f8f8;

SASS 变量名字的前面都有一个 $ 符号，冒号右边是这个变量的值。 现在 $page-background 表示的就是 #f8f8f8 这种颜色，使用这个变量可以这样：

body {
  background: $page-background;
}

上面这个用 SASS 的形式写的样式在编译成普通的 CSS 以后，会像这样：

body {
 background: #f8f8f8; }

嵌套

先看一段 HTML 代码：

<div class="ui navbar">
  <div class="content">
  </div>
  <form class="search-form">
  </form>
</div>

一组带 ui navbar 类的 div ，里面包装了一个带 content 类的 div，还包装了一个表单。现在假设你要为 ui navbar 这个容器里的元素添加样式，如果用普通的 CSS 的写法可能像这样：

.ui.navbar .content {  
}

.ui.navbar .search-form {
}

如果使用 SASS 的嵌套写法，可以这样：

.ui.navbar {
  .content {}
  .search-form {}
}

用 SASS 的写法可以更清晰的描述元素之间的关系，在创建样式的时候也少写了很多东西。

其它

SASS 还有很多功能，我们尽量在课程里去体现它们，但不会太刻意。大部分情况下，只需要最简单的几个功能，就足以提高我们的工作效率。宁皓网有个专门的 SASS 课程，你可以为作为《 网站 》系列的扩展课程去练习一下。

订阅宁皓网，即刻学习所有课程。