Sass 基础

在使用 Sass 之前，你需要在项目中安装它。如果你只是想简单浏览一下有关 Sass 的知识，请直接看下面的内容，但我们还是建议您先安装 Sass。这里有详尽的安装步骤。

预处理(Preprocessing)

CSS 本身可能很有趣，但是样式表正变得越来越大、越来越复杂、越来越难以维护。这就是预处理可以提供帮助的地方。 Sass 为你提供了 CSS 中还不存在的特性，例如嵌套、混合、继承和其它实用的功能，让编写 CSS 代码变得再次有趣。

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.

最直接的方式就是在命令行中调用 sass 命令。安装 Sass 之后，你就可以用 sass 命令将 Sass 编译为 CSS 了。首先你需要告诉 Sass 从哪个文件开始构建，以及将生成的 CSS 输出到哪里。例如，在命令行中执行 sass input.scss output.css 命令，将会把 Sass 文件 input.scss 编译输出为 output.css。

你还可以利用 --watch 参数来监视单个文件或目录。 --watch 参数告诉 Sass 监听源文件的变化，并在每次保存 Sass 文件时重新编译为 CSS。如果你只是想监视（而不是手动构建）input.scss 文件，你只需在 sass 命令后面添加 --watch 参数即可，如下：

sass --watch input.scss output.css

可以使用文件夹路径作为输入和输出，并使用冒号分隔它们，来监听文件并输出到目录。例如:

sass --watch app/sass:public/stylesheets

Sass 将会监听 app/sass 目录下所有文件的变动，并编译 CSS 到 public/stylesheets 目录下。

💡 Fun fact:

Sass has two syntaxes! The SCSS syntax (.scss) is used most commonly. It's a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax (.sass) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes.

变量(Variables)

变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问。你可以在变量中存储颜色、字体或任何 CSS 值，并在将来重复利用。Sass 使用 $ 符号作为变量的标志。例如：

SCSS
Sass
CSS
SCSS Syntax$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
Sass Syntax$font-stack: Helvetica, sans-serif
$primary-color: #333

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

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

When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

嵌套(Nesting)

在编写 HTML 时，您可能已经注意到它有一个清晰的嵌套和可视化层次结构。而 CSS 则没有。

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

理解了这一点，下面就来看一个典型的网站导航的样式示例：

SCSS
Sass
CSS
SCSS Syntaxnav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
Sass Syntaxnav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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


CSS Outputnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

你将注意到 ul、li 和 a 选择器嵌套在 nav 选择器中。这是组织 CSS 并使其更具可读性的好方法。

分片(Partials)

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.

模块(Modules)

Dart Sass: since 1.23.0
LibSass: ✗
Ruby Sass: ✗

Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.

You don't have to write all your Sass in a single file. You can split it up however you want with the @use rule. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!

SCSS
Sass
CSS
SCSS Syntax// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}
Sass Syntax// _base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

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

// styles.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white

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

.inverse {
  background-color: #333;
  color: white;
}

Notice we're using @use 'base'; in the styles.scss file. When you use a file you don't need to include the file extension. Sass is smart and will figure it out for you.

混合(Mixins)

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY. You can even pass in values to make your mixin more flexible. Here's an example for theme.

SCSS
Sass
CSS
SCSS Syntax@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);
}


Sass Syntax@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)



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

To create a mixin you use the @mixin directive and give it a name. We've named our mixin theme. We're also using the variable $theme inside the parentheses so we can pass in a theme of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

继承(Extend/Inheritance)

Using @extend lets you share a set of CSS properties from one selector to another. In our example we're going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.

SCSS
Sass
CSS
SCSS Syntax/* 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;
}
Sass Syntax/* 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 Output/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

What the above code does is tells .message, .success, .error, and .warning to behave just like %message-shared. That means anywhere that %message-shared shows up, .message, .success, .error, & .warning will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as %message-shared. This helps you avoid having to write multiple class names on HTML elements.

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.

Note that the CSS in %equal-heights isn't generated, because %equal-heights is never extended.

运算符(Operators)

在 CSS 中经常需要做数学计算。Sass 支持一些标准的数学运算符，例如+、-、*、math.div()、/ 和 %。在下面的例子中，我们将做一些简单的数学运算来计算出 aside 和 article 的宽度。

SCSS
Sass
CSS
SCSS Syntax@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;
}
Sass Syntax@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 Output.container {
  display: flex;
}

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

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

上述代码创建了一个非常简单的流式网格，以 960px 作为基准。Sass 中的操作符让我们可以做一些比如将像素值转换为百分比的操作，并且使用起来非常简单。