LESS string-set 的现代等价物是什么

Question

有关字符串集及其用途的示例，请参阅使用 LESS 字符串集属性和内容方法

经过多次困惑，我发现这已经过时了，并且自 Chrome 版本 39 以来就没有实现过，尽管它显然在 LESS 中继续存在。

教科书的用例是获取样式的最新匹配内容并将其放入变量中，以便随后可以由页眉或页脚中的string(varname)使用。

例如，以下代码会将 h1 标记的内容放入 .header 类的任何内容中，以及 varname 的值随着每个连续的 h1

进行更新

h1 { string-set: chapterTitle; }
.header { content: string(chapterTitle); }

现代的等价物是什么？

Answer 1

需要 Polyfill。 Pagedjs 可以做到，而且显然也更少。

但是，在我在问题中引用的代码中，我错误地捕获了该值。应该如下图所示。您可以将 string-set 视为一个采用两个值的函数：符号名称和符号值的来源。

捕获值后，该字符串就可供使用，并且可以使用 string(SYMBOL_NAME) 获取该值。在这种情况下，每次 H1 元素或遇到 chapterTitle 类的元素时都会捕获一个值。

h1 { string-set: chapterTitle content(); }
.header { content: string(chapterTitle); }

与应用程序类似，但能够捕获整个元素图的是 position: running(ELEMENT_NAME)，当类将其应用于元素时，会从流中删除该元素及其所有子元素并使其可用供 content: element(ELEMENT_NAME); 使用。元素图而不是字符串的优点是您可以使用 、、样式化容器甚至 和 来启动正在运行的页眉/页脚的“文本”。

如果这是不熟悉的 CSS，那是因为没有浏览器实现了这部分标准。但 pagedjs 会为你填充它。