原文地址【权侵删！！！】

Sass 基础

在使用 Sass 之前，你需要在项目中设置它。如果你只想浏览这里，请继续，但我们建议你先安装 Sass。如果你想学习如何把一切都设置好，Go here。

Preprocessing 预处理

CSS 本身很有趣，但是样式表变得更大、更复杂、更难维护。这就是预处理器可以提供帮助的地方。Sass 具有 CSS 中还不存在的特性，比如嵌套、混合、继承和其他有用的特性，这些特性可以帮助您编写健壮的、可维护的 CSS。

一旦你开始修补与 Sass，预处理器将采取你的预处理的 Sass 文件，并保存为一个正常的 CSS 文件，你可以在你的网站使用。

实现这一点的最直接方法是在你的终端中。一旦安装了 Sass，你就可以使用 sass 命令将你的 Sass 编译成 CSS。你需要告诉 Sass 从哪个文件构建，以及在哪里输出 CSS。例如，在你的终端运行sass input.scss output.css将获取一个 Sass 文件 input.scss，并将该文件编译为 output.css。

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

sass --watch input.scss output.css

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

sass --watch app/sass:public/stylesheets

Sass 将监视 app/sass 文件夹中的所有文件，以便进行更改，并将 CSS 编译到 public/stylesheets 文件夹中。

💡 Fun fact

Sass 有两种语法！SCSS 语法(.scss)是最常用的。它是 CSS 的超集，这意味着所有有效的 CSS 也是有效的 SCSS。缩进语法(.sass)更不寻常: 它使用缩进而不是大括号来嵌套语句，使用换行而不是分号来分隔语句。我们的所有示例都有两种语法。

Variables 变量

变量，你可以把它看作是一种储存信息的方式，这样你就可以在你整个样式表里重用它了。你可以用它储存颜色、字体栈等，任何你想重用的CSS变量。Sass用 $ 来标志变量。参考下面👇的例子：

Sass

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

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

SCSS

$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在被处理时，它将我们自定义的$font-stack和$primary-color变量转换为正常的CSS输出。这个功能非常有用，我们可以用它来处理颜色，使整个网站对某一颜色的多处使用能够保持一致。

Nesting 嵌套

当你在写HTML时，你也许会注意到HTML有一个清晰明了、视觉可见的嵌套结构。而CSS却没有。

Sass让你能够以HTML那种视觉可见的嵌套结构方式嵌套CSS选择器。但是，要注意的是，过度嵌套的规则将导致过度限定的CSS，这可能将会很难维护，并且通常被认为是不好的做法。

考虑到这一点，下面是一些典型的网站导航样式的例子:

Sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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

SCSS

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

你会注意到ul, li, 和 a选择器嵌套在nav选择器里。这是一种很好的方式来组织你的CSS，使之具有可读性。

Partials 片段

你可以创造片段Sass文件。片段Sass文件包含少量CSS代码片段，你可以在别的Sass文件中引入这些代码片段。这是一个很好的方式来模块化你的CSS，使之易于维护。一个片段就是一个以下划线开头命名的Sass文件，例如_partial.scss。下划线当Sass知道这个文件只是一个片段文件，不应该被处理转换输出成一个CSS文件。使用Sass片段的时候，需要配合@use规则使用。

Modules 模块

你不需要把你的所有的Sass都写在一个文件里。你可以配合@use规则来做拆分。@use规则把Sass文件当作一个模块来加载，也就意味着你可以通过基于命名空间的变量、mixins, 和函数的方式来引用它。使用一个文件也会把这个文件的CSS加入到你的编译后的输出中！

Sass

// _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

SCSS

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

CSS

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

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

注意到，我们在styles.scss文件中，使用的是@use 'base';。当你使用一个文件的时候，不需要包括这个文件的扩展名。Sass很聪明的，它能替你算出来。

Mixins 混合类型

CSS里有些东西写起来是很冗长的，特别是CSS3和许多存在的厂商前缀。Mixin 允许您创建要在整个站点中重用的 CSS 声明组。这样能让你的Sass保持 DRY。你甚至可以传入一些值，以使您的 mixin 更加灵活。这里有一个theme的例子。

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)

SCSS

@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

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

要创建 mixin，您可以使用 @mixin 指令并给它一个名称。我们已经命名了mixin theme。我们还在圆括号中使用了变量 $theme，这样我们就可以传递任何我们想要的theme。创建mixin后，可以将其用作 CSS 声明，以@include 开头，后面跟着mixin的名称。

Extend/Inheritance 扩展/继承

使用@extend 可以将一组 CSS 属性从一个选择器共享到另一个选择器。在我们的示例中，我们将使用另一个与扩展、占位符类密切相关的特性来创建一系列简单的错误、警告和成功消息。占位符类是一种特殊类型的类，它只在扩展时打印，并且可以帮助保持已编译的 CSS 的整洁和干净。

Sass

/* 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

SCSS

/* 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

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

上面的代码所做的是让.message, .success, .error, 和 .warning表现得如同的%message-shared一样。这意味着在任何%message-shared出现的地方，.message, .success, .error, 和.warning也会。奇迹发生在生成的 CSS 中，其中每个类都将获得与%message-shared相同的 CSS 属性。这有助于您避免在 HTML 元素上编写多个类名。

除了 Sass 中的占位符类之外，你还可以扩展大多数简单的 CSS 选择符，但是使用占位符是最简单的方法，可以确保你没有扩展嵌套在你样式中的其他地方的类，这会导致 CSS 中出现意想不到的选择符。

注意，在CSS中，不会生成%equal-heights的，因为%equal-heights永远不会扩展。

Operators 操作符

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

Sass

@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

SCSS

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

我们已经创建了一个非常简单的流体网格，基于960px。Sass 中的操作让我们可以毫不费力地将像素值转换为百分比。

【翻译】Sass Basics

Sass 基础

Preprocessing 预处理

💡 Fun fact

Variables 变量

Sass

SCSS

CSS

Nesting 嵌套

Sass

SCSS

CSS

Partials 片段

Modules 模块

Sass

SCSS

CSS

Mixins 混合类型

Sass

SCSS

CSS

Extend/Inheritance 扩展/继承

Sass

SCSS

CSS

Operators 操作符

Sass

SCSS

CSS