Sass 笔记

——节选翻译自 Sass 官网

安装

Sass 基础

预处理

CSS 是很有趣的，但是样式表会随着规模的增大，复杂度的加深，变得难以维护。所以这就是 预处理 大显身手的地方了。Sass 会让你发现之前不存在于 CSS 中的例如变量，嵌套，Mixin，继承等新奇的东西又会让 CSS 变得有趣起来。

如果你使用 Sass 来进行预处理，那么会通过将 Sass 文件转化为普通的 CSS 文件来供你在网页中使用。

实现上述的最直接方法就是在终端中。如果你安装了 Sass ，你可以使用 sass 指令来将 Sass 编译成 CSS 文件。你可以告诉 Sass 编译哪个文件，并且把 CSS 输出到哪里。例如，在终端中运行 sass input.scss output.css，会将 input.scss 文件编译成 output.css。

变量

试想一下通过使用变量来在样式表中储存你想要重用的信息。你可以存储类似颜色，字体或者其他任何你想重用的 CSS 值。Sass 使用 $ 符号来标记变量，下面是一个例子：

$font-stack:  Helvetica, sans-serif
$primary-color:  #333

body
  font: 100% $font-stack
  color: $primary-color

当 Sass 进行处理时，会将我们定义的 $font-stack 和 $primary-color 以及其他我们定义的变量替换成实际的值置于 CSS 文件中。这会在我们需要网站保持一个一致的整体颜色风格中显得非常好用。

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

嵌套

当你编写 HTML 时，你会发现，HTML 有一个清晰的嵌套和可见的分层结构。但是 CSS 却没有。
Sass 会让你的 CSS 选择器如同 HTML 一样进行有一个可见的分层结构嵌套。但是要注意，过度的嵌套会导致 CSS 难以维护，而且通常体验都很差。
记住了之后来看下面这个例子，一个网站导航的典型样式：

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 会如下所示：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

片段（Partials）

你可以创造一个包含一小段 CSS 代码的 Sass 文件，并通过 引入 来在其他 Sass 文件中使用。这是一种模块化 CSS 的很好方法，并且易于维护。一个 Partial 文件是一个以下划线开头的简单 Sass 文件，类似于 _partial.scss 一样。下划线会让 Sass 知道这个文件仅仅是一个片段文件，不需要被转换成 CSS 文件。片段文件会通过 @import 指令来使用。

import

CSS 有一个 import 选项来将你的 CSS 文件分割成更小，更易于维护的部分。只不过每次使用 @import 指令都会创建一个 HTTP 请求。Sass 会在当前的 CSS 的顶部使用 @import，但并不是为了进行 HTTP 请求，而是会将你想要导入的文件组合到当前的文件中，所以你只需要浏览器提供一个单独的 CSS 文件即可。

假设你有几个 Sass 文件，_reset.scss 和 base.scss。我们想要将_reset.scss 导入到 base.scss 中。

// _reset.sass

html, 
body,
ul,
ol
  margin: 0
  padding: 0

// base.sass

@import reset

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

注意我们在 base.scss 中使用了@import 'reset'。当你想要引入一个文件时不需要包含文件的扩展名.scss，Sass 很智能并且会准确地为你找出。当编译为 CSS 后如下所示：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixin

CSS 中的一些东西写起来单调乏味，尤其是在 CSS3 中的需要适配的各种浏览器前缀。通过 Mixin 可以声明在网站里随意使用的一组 CSS。你还可以传参进去，让你的CSS 变得更加灵活。Mixin 的一个很好的使用场景就是解决浏览器前缀的问题。下面是一个使用 border-radius 的例子：

=border-radius($radius)
  -webkit-border-radius:  $radius
  -moz-border-radius:  $radius
  -ms-border-radius:  $radius
  border-radius:  $radius

.box
  +border-raduis(10px)

创造一个 Mixin 你需要使用 @mixin 指令，并且给它命名。我们给这个 Mixin 起名为 border-radius。我们同样在圆括号中使用了变量 $radius ，以便我们可以传递我们需要的圆角值。当你创造了自己的 Mixin 你就可以将其作为一个 CSS 声明来使用，开头是一个 @include 指令，之后跟着你的 Mixin 名称。编译成 CSS 之后如下所示：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

扩展与继承

这是 Sass 最好用的功能之一。使用 @extend 指令可以将一个选择器的一系列 CSS 特性分享给其他的选择器。会降低你的重复代码。在接下来的例子中我们会使用扩展，占位符类（placeholder class）创建一个简单的错误，警告和成功提醒框。占位符类是一个特殊的类，只会在被扩展时才会打印出来，可以让你编译出的 CSS 变得整洁干净。

// 这一段 CSS 不会输出以为 %equal-heights 没有被扩展。
%equal-heights
  display:  flex
  flex-wrap:  wrap

// 这一段 CSS 会打印出来因为 %message-shared 被扩展了。
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

.message
  @extend %message-shared

.success
  @extend %message-shared
  border-color: green

.error
  @extend %message-shared
  border-color: red

.warning
  @extend %message-shared
  border-color: yellow

上面代码就是告诉 .message，.success，.error 以及 .warning 实现 %message-shared一样的样式就好。这意味着 %message-shared 所变现出来的内容 .message，.success，.error 以及 .warning 都会同样表现出来。在生成 CSS 文件时，上述的所有类都会获得 %message-shared 一样的 CSS 属性。这可以让你避免写很多类名在 HTML 元素上。

你可以扩展除占位符类之外的绝大多数 CSS 选择器，但是使用占位符可以确保
以防在 CSS 中出现意料之外的选择器。
You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren't extending a class that's nested elsewhere in your styles, which can result in unintended selectors in your CSS.

当你生成 CSS 之后会如下图所示。要注意的是 %equal-height 并没有输出因为它没有被使用。

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

操作符

在 CSS 中使用数学是非常有帮助的。Sass 中有少量的标准数学运算符，比如+，-，*，/ 和 %。造我们的例子中我们会做一些简单的计算来算出 aside 和 article 的宽度。

.container
  width: 100%

article[role = "main]
  float:  left
  width:  600px / 960px * 100%

aside[role = "complementary"]
  float:  right
  width: 300px / 960px * 100%

我们基于 960px 创造了一个简单的流体网格（fluid grid）。Sass 中的操作符合一做一些简单的像素值计算并轻松地将其转化为百分数。编译之后的 CSS 如下所示：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

官方文档

Sass (Syntactically Awesome StyleSheets)

Sass 在 CSS 的基础上扩展了一些强大且优雅的语言，你可以通过 CSS 一致的风格来使用变量，嵌套规则，Mixin，引用和其他。Sass 可以使大规模样式表保持结构良好，可以使小规模的样式表运行更加快速，尤其是在 xxx 的帮助下。

特性

• 与 CSS 风格一致
• 是一种可以使用变量，嵌套，Mixin 的语言扩展
• 有一些好用的函数来操作颜色和其他数值
• 有一些牛逼的控制指令
• 格式良好，可定制化的输出