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); 使用。元素圖而不是字串的優點是您可以使用、、樣式化容器甚至 code> 和 來啟動正在執行的頁首/頁尾的「文字」。

如果這是不熟悉的 CSS，那是因為沒有瀏覽器實現了這部分標準。但 pagedjs 會為你填充它。