将html变量传递给css答案

【问题标题】：Pass html variables to css将html变量传递给css
【发布时间】：2019-03-18 14:26:00
【问题描述】：

我进行了相当多的搜索，但没有找到任何最近有用的答案。

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

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

在我的 HTML 页面上，我可以访问供应商背景 URL 的对象，所以如果我能以某种方式将这些传递到单个 CSS 媒体查询中，而无需执行任何 javascript，那就太好了。

谢谢

【问题讨论】：

您认为 CSS 会是什么样子？作为伪代码？
您不能真正将 html 变量传递给 css，但您可以在 css 中定位数据属性，并且通过正确的设置，这几乎就像将其传递给 html
使用Javascript改变样式因为不能从html传到css w3schools.com/Js/js_htmldom_css.asp
正如下面 Billie 所建议的，我使用 CSS 变量内联设置了我的“可变”背景图像，然后我可以在媒体查询中从我的样式表中引用它，并且效果非常好。

标签： css sass shopify

【解决方案1】：

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

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

它会像这样工作：

将 CSS 变量附加到您的 HTML 标记：<html style="--variable:'your_fallback_image.jpg'">
使用 URL 动态填充该变量（在本示例中如何）
创建可以设置背景的 CSS（包含在媒体查询中）

如下所示：

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

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

【讨论】：

感谢 Billie，CSS 变量运行良好。我已经将我的两种图像尺寸（桌面和移动）设置为内联，并根据我的媒体查询在 css 中调用每一个。工作一种享受。
另外，对于任何感兴趣的人，在使用 css 变量时插入 URL 时有一些注意事项（这是我在特定用例中所做的），但这个线程有助于解释解决问题的最佳方法这。 stackoverflow.com/questions/42330075/…

【解决方案2】：

您不会将 HTML 传递给 CSS。当 Liquid 将您的主题呈现为一大串 HTML 时，您可以使用产品的供应商来影响您向客户展示的 CSS。要么您提前在 CSS 中设置您需要的特定废话，然后以这种方式切换，要么您从产品元字段中吸取废话并以这种方式使用它。换句话说，既然你可以将字符串保存为元字段，而 CSS 是一个字符串，那么你也可以这样做。

【讨论】：