在 SCSS 中，% 符号表示啥？ [复制]

Posted 2023-03-06

【中文标题】在 SCSS 中，% 符号表示啥？ [复制]

【英文标题】：In SCSS, what does % symbol indicate? [duplicate]在 SCSS 中，% 符号表示什么？ [复制]

【发布时间】：2019-08-07 07:17:28

【问题描述】：

scss中的%是什么意思？

在上下文中使用 %：（来源：https://codepen.io/FWeinb/pen/GrpqB?editors=1100）

@import "compass/css3";

.box
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  line-height: 10em;
  overflow: hidden;


%box__dir
  position: absolute;
  width: inherit;
  height: inherit;          
  text-align: center;
  line-height: inherit;
  transition:transform .4s ease;

“box_dir”前面的百分号表示什么？

【问题讨论】：

嗯，SCSS 和 SASS 显然是不同的。一个不了解 SASS 的人会寻找关于 SCSS 而不是 SASS 的问题。还有什么可说的；这不是重复的。

***.com/questions/5654447/…

@TemaniAfif 对于一个不关心 SASS 的人来说，有这个问题会对他有很大帮助。他可能会看到您将我的问题标记为重复的问题，并认为这对他没有帮助，因为它是关于 SASS 的——请记住，他不知道 SASS 和 SCSS 在很大程度上是相同的。 （不久前，我也是这种情况）

我仍然没有看到标记为重复的问题。关闭问题并不意味着删除问题。一个人仍然可以找到你的问题和下面的答案，他也会明白 SASS 和 SCSS 是一样的。我们现在也在编写的 cmets 将使任何会发现这个问题的人更好地理解两者是相同的

【参考方案1】：

在SCSS 中，% 表示placeholder selector。

[Placeholders] 与类选择器非常相似，但不是使用 句点 (.) 开头，使用百分比字符 (%)。 占位符选择器具有它们不会的附加属性 出现在生成的 CSS 中，只有扩展它们的选择器才会 包含在输出中。

因此，如果您将其包含在您的 SCSS 某处但从未使用（扩展）它，它将不会出现在您生成的 CSS 中。

%box__dir 
 position:absolute;
 width:inherit;
 height:inherit;
 text-align:center;
 line-height:inherit;
 transition:transform .4s ease;

一旦您使用了placeholder，它将按预期出现在您生成的CSS 中。

.something 
  color: red;
  @extend %box__dir;

生成的CSS:

.something 
  color: red;
  position:absolute;
  width:inherit;
  height:inherit;
  text-align:center;
  line-height:inherit;
  transition:transform .4s ease;

【讨论】：

"@extend $box__dir" - 美元符号表示它是一个变量，对吧？

@sebastiannielsen 这是一个错字。固定的。我在答案中包含的链接有几个真实世界的例子，应该可以帮助你超出答案的范围。

mixins 和 % 有什么区别？如果在任何类中都没有使用 mixin，它也不会生成，对吧？

@AleksGrunwald 很好的解释here，文章末尾附有实际例子。