Sass基础

在使用Sass之前，您需要在项目中进行设置。如果您只想浏览此处，请继续，但是我们建议您先安装Sass。如果您想了解如何进行所有设置，请转到此处。

预处理

单独的CSS可能很有趣，但是样式表越来越大，越来越复杂并且难以维护。这是预处理器可以提供帮助的地方。Sass使您可以使用CSS中尚不存在的功能，例如变量，嵌套，混合，继承和其他使CSS编写变得有趣的好东西  。

一旦开始对Sass进行修补，它将获取经过预处理的Sass文件，并将其另存为可在您的网站中使用的普通CSS文件。

实现此目标的最直接方法是在您的终端中。一旦安装了Sass，就可以使用以下 命令将Sass编译为CSSsass。您需要告诉Sass从哪个文件生成，以及将CSS输出到哪里  。例如，sass input.scss output.css从您的终端运行将需要一个Sass文件input.scss，然后将该文件编译为output.css。

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

sass --watch input.scss output.css

通过使用文件夹路径作为输入和输出，并用冒号分隔它们，可以监视和输出到目录。在此示例中：

sass --watch app/sass:public/stylesheets

Sass会监视文件app/sass夹中的所有文件进行更改，然后将CSS编译到该public/stylesheets 文件夹中。

变数

将变量视为一种存储要在样式表中重复使用的信息的方法。您可以存储颜色，字体堆栈或任何您想重用的CSS值之类的东西。Sass使用该$ 符号使某物成为变量。这是一个例子：

SCSS  语法

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

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

处理Sass时，它将获取我们为定义的变量$font-stack，$primary-color然后输出普通CSS，并将变量值放置在CSS中。当使用品牌色彩并在整个站点中保持色彩一致时，此功能可能非常强大。

套料

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

Sass使您可以按照与HTML相同的视觉层次结构嵌套CSS选择器。请注意，过度嵌套的规则会导致CSS资格过高，这可能难以维护，通常被认为是不好的做法。

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

SCSS  语法

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并使之更具可读性的好方法。

部分

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

模组

兼容性：
达特·sass（Dart Sass）
从  1.23.0开始
LibSass
✗
红宝石sass
✗

您不必将所有Sass都写在一个文件中。您可以根据需要将其拆分@use。该规则将另一个Sass文件作为模块加载，这意味着您可以在Sass文件中使用基于文件名的命名空间引用其变量，mixins和函数。使用文件还将在编译输出中包含它生成的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;
}

注意我们@use 'base';在styles.scss文件中使用。使用文件时，无需包括文件扩展名。Sass很聪明，会为您解决问题。

混合蛋白

CSS中的某些内容编写起来有些繁琐，尤其是使用CSS3  和存在的许多供应商前缀时。使用mixin，您可以创建要在整个站点中重复使用的CSS声明组  。您甚至可以传递值以使混入更加灵活。mixin的很好用法是用于供应商前缀。这是的示例  transform。

SCSS  语法

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

要创建一个mixin，请使用@mixin指令并为其命名。我们将其命名为mixin transform。我们还在$property括号内使用了变量  ，因此我们可以传递任何所需的变换。创建混入之后，可以将其用作CSS  声明@include，以混入的名称开头。

扩展/继承

这是Sass最有用的功能之一。使用@extend使您可以将一组CSS属性从一个选择器共享到另一个选择器。它有助于使Sass保持非常干燥。在我们的示例中，我们将使用扩展，占位符类一起使用的另一个功能，为错误，警告和成功创建一系列简单的消息传递。占位符类是一种特殊的类，仅在扩展时才打印，并且可以帮助保持编译后的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;
}

什么上面的代码的作用是告诉.message，.success，.error，和.warning做人一样%message-shared。这意味着任何地方%message-shared显示出来，.message，.success，.error，和 .warning也会这样做的。魔术发生在生成的CSS中，其中每个类将获得与相同的CSS属性%message-shared。这有助于您避免在HTML  元素上编写多个类名。

除了Sass中的占位符类之外，您还可以扩展最简单的CSS选择器，但是使用占位符是确保不扩展嵌套在样式中其他位置的类的最简单方法，这会导致CSS中意外的选择器  。

请注意，不会生成CSS in %equal-heights，因为%equal-heights它不会被扩展。

经营者

在CSS中进行数学运算非常有帮助。sass拥有标准的数学运算符，例如屈指可数+，-，*，/，和%。在我们的示例中，我们将做一些简单的数学运算来计算aside ＆的 宽度article。

SCSS  语法

.container {
  width: 100%;
}

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

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

我们创建了一个非常简单的基于960px的流体网格。Sass中的操作使我们可以做一些事情，例如获取像素值并将其转换为百分比而没有太多麻烦。