具有超能力的 SCSS 或 CSS

什么是 SCSS？

Sass 或 Scss 是 CSS（层叠样式表）的超类型。Sass 被官方描述为具有超能力的 CSS。

Sass 和 Scss 在功能上是相同的。可以根据自己的喜好将两者之一用于您的项目。

scss 和 sass 之间的主要区别在于它们的编码标准。Scss 使用标准的 css 编码约定，而 sass 使用缩进和简写方法。

.scss

button {
   background-color: red;
}

.sass

button
   background-color: red

SCSS 为我们做什么？

我们使用 CSS 使我们的网页结构化、美观且响应迅速。SCSS 有助于在更短的时间内轻松完成这项工作。

SCSS 的特点

变量
嵌套
混合
遗产
进口
采用
向前

变量

https://www.npmjs.com/package/gulp-sass 变量用于为整个应用程序中的可重用值分配键和值。当需要长文本作为属性的值时易于使用，因为我们不需要记住它，因为我们只需要使用变量名作为值。美元符号是指变量名。

$dark: #000000

嵌套

让我们假设在为您设置样式的 html 页面中出现以下场景。

<div class="myDiv">
   <h1 class="myHeading">Hello</h1>
</div>

为此做样式的 css 方式应该如下

div.myDiv {
   background: red;
}

div.myDiv  h1.myHeading {
   color: white;
}

我们可以看到，当嵌套元素被添加到我们的 html 中时，css 选择器逐渐变长。为了解决这个问题，我们在 scss 中使用嵌套。scss 解决方案如下所示。通过这种方式，我们不需要 div.myDiv 一次又一次地重复 css 选择器 ( )。

div.myDiv {
   background: red;

   h1.myHeading {
      color: white;
   }
}

混合

Mixin 是在 scss 样式表中引用的 css 规则集，可用作返回该规则集的函数。它可能涉及传递（参数）或不传递。

@mixin  background-color($primary: red) {
   background-color: $primary;
}

div.myDiv {
   @include  background-color(teal);
}

遗产

继承用于从定义的元素样式或定义的实用程序类继承样式，并使用它们的类引用覆盖它们。

.yourDiv {
   background-color: red;
   color: white;
}

.myDiv {
   @extend  .yourDiv;
   text-decoration: underline;
}

@ 进口

导入功能使用 css 的模块化用法，这意味着我们可以根据其职责定义样式表，并使用 @im port 关键字在单个 scss 文件中使用它们。

@im port 'typography';

@ 采用

此功能加载在 scss 样式表中的另一个 sass 样式表中定义的其他 css 规则集、mixin 和变量。@Use 就像作为变量引用导入一样。

@use  'typography';

h3.myHeading {
   font-size: typography.$fs-m;
}

使用它而不是导入，我们可以将我们的规则集范围从样式表引用中引用。例如，如果我们一起使用不同的深色和浅色 css 主题，这会有所帮助。

@ 向前

当需要进行嵌套导入时，此功能会加载 scss 样式表以供使用。因此，当您需要在主 scss 文件中使用 scss 表时，这有助于加载它以供使用。这减少了样式表中需要的 import 语句和 use 语句。

@forward  'myVariables'

如何申请 SCSS ？

SCSS 在很多方面都很棒，但是我们不能像使用 css 那样使用链接标签直接在我们的 html 中使用 .scss 或文件。.sass 有一个将 scss 文件转换为 css 的过程，称为预编译 scss 到 css。

预编译器获取 scss 文件并按照您的命令将它们转换为 css。然后它将输出作为 css 样式表提供，您可以在应用程序中使用链接标签。

要使用预编译器，我们几乎没有选择。

对于静态 Web 应用，请使用适用于您的 IDE/编辑器的扩展
对于基于节点的应用程序，使用像 gulp-sass 这样的自动任务运行程序，它会自动监视给定目录中的更改并同时编译它。

何时使用 SCSS ？

您可以在中使用 scss 而不是常规的 css，

单页 Web 应用程序的样式
企业级 Web 应用程序的样式
从 scss 主题开始或制作主题时
使用前在 html 模板中多修改 css

通过以下链接了解有关 scss 的更多信息

https://sass-lang.com/documentation
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
https://www.npmjs.com/package/gulp-sass