应该不用说，如果您使用CSS向页面上添加书面内容块，那么您会做错了。
，但是由于我们只是在这里玩得开心，为什么不呢？另外，我将从一开始就使用Sass来节省一些击键。
最初的想法
起初，我以为我只是用content造型了一堆HTML标签，并且可以完成。那是该物业的工作方式，对
所以这是我的最初解决方案：
.event {
.title { content: "Awesome Regional Conference 2023" }
.date { content: "5/21/2023" }
.venue { content: "Totally Real Conference Hall" }
.location { content: "123 Totally Real Blvd, Austin, Tx" }
}
我以为完成了。让我们把它扔进JSFiddle。
哇，还有谁看不到呢？真的，只有我？
如果您经常使用content，则可能看到了这一点。我显然没有。因此，我首先确认它是在我期望将其设置的元素上设置的。
然后我开始弄乱样式：边距，尺寸，字体尺寸和颜色等。
刮了一段时间后，我想起了我唯一使用content的时间在::before和::after上。所以我gave that a shot。
看一下，它立即起作用！
我想content可以直接在HTML元素的主要内容区域中起作用是有道理的。这可能会破坏其实际的HTML和文本内容。事后看来，我应该了解content在用Bootstrap和Fontawesome等工具定义的::before和::after样式时，如何更快地工作。
进一步
好吧，现在我们通过CSS将书面内容渲染到HTML中。怎么能重复使用一些？与CSS variables！
真棒！因此，现在我们可以为特定事件ID生成样式，并且它将起作用。
，但我们现在也使事情有些重复。想象一下，如果您有10-20个元素，则具有匹配的vars。 Blech。
混合物进行营救！
由于Sass有Mixins，这将有助于我们更清理一些（我知道，无论如何这都是错误的，而且很凌乱，但幽默了我）。如果我们写一个Mixin名称，before我们可以自动生成所有类并查找正确的CSS var，只需使用字符串列表即可。
@mixin before($labels...) {
@for $i from 0 to length($labels) {
.#{nth($labels, $i + 1)}::before { content: var(--#{nth($labels, $i + 1)}) }
}
}
使用Mixin签名中的$var...语法，我们可以将所有参数浓缩到Mixin中。
如果我们有2个参数而不是1个参数，那么它将更加类似地工作：
@mixin before($param1, $param2...) {}
// here, $param1 gets the first argument, and $param2 gets all
// other arguments after that: "something else" and
// "something else again".
@include before("something", "something else", "something else again")
然后使用上面的@for循环与length($labels)结合使用，我们可以在整个列表上循环。并使用nth，我们可以将列表中的每个字符串用作类Selector和CSS VAR名称。
关于@for和nth()的一些事情要注意
您会注意到循环中的范围基本上为0至length($labels)。这有效您期望大多数for循环工作：从0开始，在到达length时停止。
但SASS中的列表实际上是从1开始的索引。因此，没有元素0，最后一个元素的索引号与列表的长度相同。
这迫使我们在2个位置的1个中进行一些额外的数学：循环定义：
@for $i from 1 to length($labels) + 1 {}
或循环主体，如上所述：$i + 1。
啊，好干净
这是this的工作版本。
但是等等，更多
如果我们想做一些疯狂的事情，例如在我们的html中添加额外的内容？
哦，对，我们使用了::before，所以我们的CSS内容是在实际HTML内容之前。
让我们稍微切换一点：重命名Mixin并使用::after伪元素。
那就是我们向后的小CSS项目的final version。
陷阱
这是一个给定的，但是在这个问题上进行此操作存在问题。
首先，在content does not exist in the DOM中设置的内容。这使内容使内容变得非常困难并损害可访问性。
接下来，它会在不需要的地方添加顶部。 CSS用于更改内容的外观，而不是直接呈现渲染 content。
最后，与最后一点一起，它将整个内容的放置甚至部分实现都融合到了您的样式表。您的前端不需要 在已经呈现其他所有内容时，您的样式表即可渲染内容。
学到了什么？
对于初学者来说，这种类型的事情是在一个严肃的项目上疯狂地做的，所以也许 '除非您做代码高尔夫球。在代码高尔夫球场上发疯。 ð
更实际：
-
如果您不使用
content（举起我的手），您了解到它对实际上具有自己内容的HTML元素没有任何作用。 -
为什么它不会影响HTML内容很重要：它渲染的内容在DOM之外，这会对您的整体用户体验产生负面影响，尤其是对于可访问性。
< /li>
感谢您的阅读！