我做了相當多的搜索，但是沒有找到任何最近的有用的答案。

我的問題是，是否可以將HTML中的變量(可能使用數據屬性)傳遞到CSS中？

我的用例是，我有品牌頁面，我想使用媒體查詢來顯示每個品牌的供應商特定背景。我知道你不能在內聯CSS中使用媒體查詢，但是我同樣不想在我的樣式表中創建大約100個媒體查詢。

在我的HTML頁面上，我可以訪問供應商背景URL的對象，所以如果我能以某種方式將這些傳遞到單個CSS媒體查詢中，而不需要任何JavaScript，那就太好了。

你可以用CSS變量做到這一點(當然，沒有其他方法)。

https://developer . Mozilla . org/en-US/doc/Web/CSS/Using _ CSS _ custom _ properties

它大概是這樣工作的:

在你的HTML標簽上附加一個CSS變量:& lthtml style = "-variable:' your _ fallback _ image . jpg ' " & gt； 用URL動態填充變量(對于本例來說，如何填充并不重要) 創建設置背景的CSS(包裝在媒體查詢中) 如下圖所示:

@media screen and (width:64rem){
  background-image: url(--variable);
}

現在，當改變URL時，它應該相應地更新，并設置一個缺省值，以防您的動態解決方案不起作用。希望有幫助。

你不要把HTMl傳給CSS。當Liquid將你的主題渲染成一大串HTML時，你可以利用產品的供應商來影響你向客戶展示的CSS。要么你提前在你的CSS中設置你需要的特定垃圾，然后這樣切換，要么你從產品元字段中吸取垃圾，然后這樣使用它。換句話說，既然你可以將一個字符串保存為一個元字段，而CSS是一個字符串，你也可以這樣做。