scss 中 % 符号有何用途？

收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天米云就整理分享《scss 中 % 符号有何用途？》，聊聊，希望可以帮助到正在努力赚钱的你。

scss 中 % 表示什么？

在给定的 scss 片段中：

%style {
  width: 100px;
  height: 30px;
  line-height: 28px;
  vertical-align: middle;
}

% 符号表示 占位符选择器。它与常规 id 或类选择器类似，但使用 % 符号替换了 # 或 . 符号。

占位符选择器的用途

占位符选择器用于定义可重用的 css 属性集，这些属性集可通过 @extend 指令在其他选择器中使用。这允许在代码中维护一致的样式，并简化对样式属性的更改。

用法

要使用占位符选择器，您需要：

1. 使用 % 符号定义选择器，例如 %style。
2. 在您想要重用属性集的其他选择器中使用 @extend 指令，例如：

.button {
  @extend %style;
}

注意

当占位符选择器单独使用时（即未通过 @extend 调用），它不会编译到 css 输出中。

以上就是《scss 中 % 符号有何用途？》的详细内容，更多关于的资料请关注米云公众号！

版本声明 本文转载于：php 如有侵犯，请联系删除

如何从 URL 中提取 “?referer=” 和 “&username=” 之间的内容？