【Sass详解】

Sass 是 CSS 的一种预编译语言。它提供了 变量（variables）、嵌套规则（nested rules）、 混合（mixins）、 函数（functions） 等功能，并且完全兼容 CSS 语法。Sass 能够让复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

安装

随处安装（独立）

您可以通过下载软件包在 Windows、Mac 或 Linux 上安装 Sass， 从 GitHub 下载并将其添加到 你的路径。仅此而已——没有外部依赖项，无需安装任何其他内容。

随处安装 （npm）

如果使用 Node.js，还可以通过运行 npm 来安装 Sass

npm install -g sass

在 Windows 上安装 （Chocolatey）

如果将 Chocolatey 包管理器用于 Windows，您可以通过运行

choco install sass

在 Mac OS X 或 Linux （Homebrew） 上安装

如果您使用适用于 Mac OS X 的 Homebrew 包管理器或 Linux，您可以通过运行

brew install sass/sass/sass

预处理

CSS 本身可能很有趣，但样式表变得越来越大、越来越复杂、越来越复杂，更难维护。这就是预处理器更优方案的地方。Sass 具有 CSS 中缺少的特点，例如嵌套、混合、继承和其他帮助您编写健壮、可维护的 CSS 的好东西。

您还可以查看具有该标志的单个文件或目录。Watch 标志告诉 Sass 监视源文件的更改，并在每次保存 Sass 时重新编译 CSS。如果您想要监视(而不是手动构建)您的文件，您只需要将 watch 标志添加到您的命令中，如下所示:  --watch input.scss

sass --watch input.scss output.css

当然，你也可以通过使用文件夹路径作为输入和输出，并用冒号分隔它们，监视目录并将其输出到目录。在这个例子中:

sass --watch app/sass:public/stylesheets

Sass 将监视文件夹中的所有文件，并将 CSS 编译到 文件夹.app/sassppublic/stylesheets中

---

变量

将变量视为存储要重用的信息的一种方式贯穿整个样式表。您可以存储颜色、字体堆栈或您认为要重用的任何 CSS 值。Sacc 使用符号使 变量的东西。下面是一个示例(SCSS syntax)：$

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

body {
  font: 100% $font-stack;
  color: $primary-color;
}

转换后的 CSS

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

​​​​当处理 Sass 时，它接受我们为 CSS 定义的变量，并用放置在 CSS 中的变量值输出普通 CSS。

---

嵌 套

在编写 HTML 时，您可能已经注意到它具有清晰的嵌套和可视化 等级制度。另一方面，CSS 则不然。

Sass 将允许您按照与 HTML 相同的可视层次结构嵌套 CSS 选择器。请注意，过度嵌套的规则将导致过度限定的 CSS，这可能很难维护，通常被认为是不好的做法。

考虑到这一点，以下是网站导航的一些典型样式的示例：

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

  li { display: inline-block; }

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

转换后的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;
}

---

模块化

你不必把你所有的Sass 都写在一个文件里。你可以根据规则随意分配。此规则以模块的形式加载另一个 Sass 文件，这意味着您可以使用基于文件名的命名空间在 Sass 文件中引用它的变量、 Mixin 和函数。使用文件还将包括它在编译输出中生成的 CSS！@ use 

// _base.scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }	body { font: 100% Helvetica, sans-serif; color: #333; } .inverse { background-color: #333; color: white; }
// styles.scss @use 'base'; .inverse { background-color: base.$primary-color; color: white; }

---

混合器

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

---

扩展/继承

使用允许您将一组 CSS 属性从一个选择器共享到 另一个。在我们的示例中，我们将创建一系列简单的消息传递 错误、警告和成功使用另一个功能齐头并进 具有扩展、占位符类。占位符类是一种特殊类型的类 它只在扩展时打印，并且可以帮助保持编译后的CSS整洁 而且干净。@extend

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

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

---

运算操作符

在 CSS 中做数学运算是非常有帮助的。Sass 有一些标准的数学运算符，如、、和。在我们的示例中，我们将做一些简单的数学运算来计算和的宽度+-*math.div()%articleaside

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

转换后的CSS

.container {
  display: flex;
}

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

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}