什么是 scss

Sass（英文全称：Syntactically Awesome Stylesheets）是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做SCSS，是 SassyCSS 的简写，使用和 CSS 一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。采用.scss文件扩展名区。

scss 官网：https://sass-lang.com/
scss 项目：https://github.com/sass

预处理

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

一旦你开始修改 Sass，它会获取你预处理的 Sass 文件并将其保存为一个普通的 CSS 文件，你可以在你的网站中使用它。

最直接的方式就是在命令行终端中调用 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 目录下。

 

变量

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

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

当 Sass 代码被处理时，它会获取我们为定义的变量$font-stack，$primary-color值放在 CSS 中，并输出普通的 CSS。这在使用它们的值在整个网站上保持一致。

 

嵌套

在编写 HTML 时，您可能已经注意到它有一个清晰的嵌套和可视化层次结构。而 CSS 则没有。Sass 允许您嵌套 CSS 选择器，嵌套方式与 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;
  }
}

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

 

片段

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

 

模块

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

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


@use'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

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

 

混合

CSS 中的一些东西写起来有点乏味，尤其是 CSS3 和存在的许多浏览器专用前缀。一个 mixin 可以让你创建一组，你想要在你的站点中，重用的 CSS 声明。它有助于保持你的 Sass 非常干燥。您甚至可以传入值以使您的 mixin 更加灵活。

scss 样式输出 
@mixintheme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @includetheme;
}
.alert {
  @includetheme($theme: DarkRed);
}
.success {
  @includetheme($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;
}

要创建一个 mixin ，您可以使用该@mixin指令并为其命名。我们已经命名了我们的 mixin theme。我们还在$theme括号内使用变量，所以我们可以传入theme我们想要的任何东西。创建 mixin 后，您可以将其用作CSS 声明，开头@include后跟 mixin 的名称。

 

扩展/继承

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


%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}


%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。

除了 Sass 中的占位符类之外，您还可以扩展大多数 CSS 选择器，，但是使用占位符可以确保，以防在 CSS 中出现意料之外的其他选择器。

请注意，上例中%equal-heights不会生成到 CSS 中，因为它从未被使用。

 

操作符

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

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

.container {
  display: flex;
}

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

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

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