Sass：插值和嵌套🎁

插值

嵌套规则

在上一篇文章中，我们讨论了 SSCS 规则。我们从变量开始，并演示了它们不能用作属性名的占位符，并指出可以使用插值来代替它们。所以，让我们进一步讨论插值这个话题。

插值

sass 文档说

插值几乎可以在 Sass 样式表的任何地方使用，以将 SassScript 表达式的结果嵌入到 CSS 块中。

它允许我们使用将 sass 表达式插入到简单的 SASS 或 CSS 代码中#{expression}。

插值语法：

#{expression}

例子：

请记住，我们可以使用插值作为属性名称和值的占位符。

它也可以用作选择器的占位符。
例如：

嵌套规则

CSS 选择器可以在 Sass 中嵌套，就像在 HTML 中一样。

看一下这个 Sass 导航代码示例：

请注意，在 Sass 中ul，、li和选择器嵌套在nav选择器内。

而在 CSS 中，规则是逐个定义的（不嵌套）：

您可以看到，由于 sass 允许嵌套属性，因此它比传统 CSS 更具可读性和清晰度。

Sass 嵌套属性

许多 CSS 属性（例如 text-align、text-transform 和 text-overflow）都以相同的前缀开头。

Sass 允许你将它们写为嵌套属性：

目前就这些了。我们将在下一篇文章中进一步讨论嵌套。

再见🧡