SCSS / Sass 格式化与美化工具
指导
SCSS / Sass 格式化与美化工具
即时格式化和美化您的 SCSS 代码。粘贴混乱或压缩的样式表，即可获得清晰、正确缩进、具有正确嵌套、一致间距和组织化 at-规则的输出。支持展开、紧凑和最小化输出模式。
如何使用
将您的 SCSS 代码粘贴到输入区域。选择您偏好的缩进大小、输出格式和花括号样式。格式化的代码会在输出面板中即时更新 — 一键复制。根据您需要可读性还是生产就绪的输出，在展开、紧凑和最小化模式之间切换。
特征
- SCSS 嵌套支持 – 正确格式化深度嵌套的选择器、父选择器 (“
&”) 和嵌套的 at-规则，如@media和@supports. - 变量 & Mixin 处理 – 正确格式化 SCSS 变量 (“
$variable),@mixin,@include,@extend,@use， 和@forward”) 指令。 - 三种输出模式 – 展开 (每行一个声明，完全可读)、紧凑 (每行一个规则) 和最小化 (删除所有空白以供生产使用)。
- 可配置缩进 – 在 2 个空格、4 个空格或制表符之间进行选择。
- 花括号样式选项 – 同一行或下一行放置开括号。
- 空白规范化 – 在冒号后、花括号前以及规则块之间保持一致的间距。
- 实时格式化 – 在您键入或更改任何选项时，输出会即时更新。
何时使用此工具
在清理 SCSS 样式表以进行代码审查、将最小化的 CSS 重新格式化为可读的 SCSS，或标准化项目样式文件中的缩进时，使用此工具。它在扩展和最小化格式之间进行转换，或为文档和教程快速美化 SCSS 片段时特别有用。
常问问题
-
SCSS 和 Sass 有什么区别？
SCSS (Sassy CSS) 和 Sass 是同一种预处理器的两种语法。SCSS 使用花括号和分号，就像常规 CSS 一样 — 任何有效的 CSS 也都是有效的 SCSS。缩进式 Sass 语法使用缩进而不是花括号，使用换行符而不是分号。SCSS 更受欢迎，因为它对 CSS 开发人员来说很熟悉，并且更容易逐步采用。大多数现代项目都使用 .scss 文件扩展名。
-
什么是 SCSS 变量以及为什么使用它们？
SCSS 变量 (用 $ 声明) 存储可重用值，如颜色、字体大小、间距和断点。例如，$primary-color: #3498db; 让您可以在整个样式表中引用相同的颜色并在一个地方进行更改。虽然 CSS 自定义属性 (--variable) 现在原生提供了类似的功能，但 SCSS 变量是编译时值，支持更强大的功能，如选择器中的插值和数学运算。
-
什么是 SCSS 嵌套以及何时应该使用它？
SCSS 嵌套允许您在父选择器内编写子选择器，反映您的 HTML 结构。例如，.nav { .item { color: blue; } } 将编译为 .nav .item { color: blue; }。嵌套可以提高相关样式的可读性，但过度嵌套 (超过 3-4 层深度) 会创建难以覆盖的过度具体的选择器。一般规则：为结构而嵌套，而不是为每个父子关系嵌套。
-
SCSS 中的 @mixin 和 @extend 有什么区别？
@mixin 创建可重用的 CSS 块，这些块将在您 @include 它们的地方进行复制 — 就像一个输出 CSS 的函数一样。@extend 通过将扩展选择器添加到原始规则来共享选择器的样式 — 它对选择器进行分组而不是复制代码。当您需要参数或样式在不同用法之间变化时，请使用 @mixin。当您需要简单的样式继承并且希望最小化 CSS 输出时，请使用 @extend。过度使用 @extend 可能会创建意外的选择器链。
