Question

我已经做了相当多的搜索，但是没有找到任何近期有用的答案。

我的问题是是否可以将HTML中的变量（可能使用数据属性）传递到CSS中？

我的用例是，我有一些品牌页面，我想使用媒体查询来使用媒体查询显示每个品牌的供应商特定背景。我知道您不能在内联CSS中使用媒体查询，但我同样不想在样式表中创建约100个媒体查询。

在我的HTML页面上，我可以访问供应商背景URL的对象，因此，如果我不做任何JavaScript就能以某种方式将它们传递到单个CSS媒体查询中，那就太好了。

谢谢

Answer 1

您可以使用CSS变量来做到这一点（没有其他方法）。

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

它会像这样工作：

将CSS变量附加到HTML标记：<html style="--variable:'your_fallback_image.jpg'">
动态地使用网址填充该变量（对于本示例而言，无关紧要）
创建将设置背景的CSS（包装在媒体查询中）

如下所示：

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

现在，它应该在更改URL时进行相应更新，并设置默认值，以防动态解决方案不起作用。希望有帮助。

Answer 2

您不会将HTMl传递给CSS。当Liquid将您的主题呈现为大字符串HTML时，您可以使用产品的供应商来影响显示给客户的CSS。您可以提前在CSS中设置所需的特定废话，然后以这种方式进行切换，或者从特定产品元字段中剔除废话并以这种方式使用。换句话说，由于您可以将字符串另存为元字段，而CSS是字符串，因此也可以这样做。

将html变量传递给css

2 个答案: