代码之家 › 专栏 › 技术社区 › Gavin5511

将HTML变量传递给CSS

shopify sass css

Gavin5511 · 技术社区 · 7 年前

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

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

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

在我的HTML页面上,我可以访问供应商后台URL的对象,所以如果我可以将这些内容以某种方式传递到一个CSS媒体查询中而不做任何javascript,那就太好了。

谢谢

0 回复 | 直到 7 年前

Billie Bobbel 7 年前

你可以用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时进行相应的更新,并设置一个默认值,以防您的动态解决方案无法工作。希望有帮助。

David Lazar 7 年前

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

推荐文章