Sass 基础

在你可以使用 Sass 之前，你需要在你的项目中设置它。如果您只想浏览这里，请继续，但我们建议您先安装 Sass。如果您想了解如何进行所有设置，请访问此处。

预处理

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文件夹中。

💡有趣的事实：

Sass 有两种语法！SCSS语法（.scss）是最常用的。它是CSS的超集，这意味着所有有效的CSS也是有效的SCSS。 缩进语法（.sass）更特别：它使用缩进而不是花括号来嵌套语句，并使用换行符而不是分号来分隔它们。我们所有的示例都可以在这两种语法中使用。

变量

将变量视为一种存储信息的方式，您希望在整个样式表中重复使用这些信息。您可以存储诸如颜色、字体堆栈或任何您认为要复用的CSS值之类的内容。Sass 使用$符号来使某些东西成为变量。下面是一个例子：

下面是一个例子：

• SCSS 语法

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

• SASS 语法

  $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中的变量值输出成正常CSS。当使用品牌颜色并使它们在整个站点中保持一致时，这可能非常强大。

嵌套

在编写HTML时，您可能已经注意到它具有清晰的嵌套和视觉层次结构。另一方面，CSS没有。

Sass 可以让你嵌套CSS选择器，以遵循HTML的相同视觉层次结构。请注意，过度嵌套的规则将导致过度限定的CSS，这可能难以维护，并且通常被认为是不好的做法。

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

• 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

您可以创建 partial Sass 文件，其中含有可以包含在其他 Sass 文件中的CSS小片段。这是模块化CSS并有助于使事情更易于维护的好方法。Partial 是一个以下划线开头的 Sass 文件。您可以将其命名为_partial.scss. 下划线让 Sass 知道该文件只是partial文件，不应将其生成为CSS文件。Sass partial 与 @use 规则一起使用。

模块

兼容性：Dart Sass 从 1.23.0 开始

LibSass ✗

Ruby Sass ✗

▶ 目前只有 Dart Sass 支持@use。其他实现的用户必须改用@import规则 。

您不必将所有的 Sass 都写在一个文件中。您可以使用 @use 规则随意拆分它。此规则将另一个 Sass 文件加载为module，这意味着您可以使用基于文件名的命名空间在 Sass 文件中引用其变量、mixin和函数。使用文件还将在编译输出中包含它生成的CSS！

• 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 和存在的许多vendor前缀。mixin 使您可以创建要在整个站点中重复使用的CSS声明组。它有助于让你的 Sass 保持DRY。您甚至可以传入值以使您的 mixin 更加灵活。下面是一个例子 theme。

• 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 后，您可以以 @include 开头、后跟 mixin 的名称将其用作 CSS 声明。

扩展/继承

使用@extend允许您从一个选择器共享一组CSS属性到另一个选择器。在我们的示例中，我们将使用另一个与扩展、占位符类密切相关的功能来创建一系列简单的错误、警告和成功消息传递。占位符类是一种特殊类型的类，它仅在被扩展时打印，有助于保持编译后的CSS整洁。

• 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中出现意外的选择器 。

请注意，%equal-heights 中的 CSS 不会被生成，因为 %equal-heights 从来没有被扩展过。

运算符

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

• SCSS 语法

  .container {
    width: 100%;
  }
  
  article[role="main"] {
    float: left;
    width: 600px / 960px * 100%;
  }
  
  aside[role="complementary"] {
    float: right;
    width: 300px / 960px * 100%;
  }
  

• CSS 输出

  .container {
    width: 100%;
  }
  
  article[role="main"] {
    float: left;
    width: 62.5%;
  }
  
  aside[role="complementary"] {
    float: right;
    width: 31.25%;
  }
  

我们创建了一个非常简单的流体网格，基于 960px。Sass 中的运算符让我们可以轻松地将像素值转换为百分比。

//End of Article

• Previous
  拼写错误导致的Webpack构建报错Error: Cannot find module '@bable/babel-preset-preset-env'
• Next
  Node 文档机翻整理