如何解决如何访问 CSS 文件中的部分设置值
在我的一个主题文件中,我让网站创建者能够使用架构设置元素的 background-size
属性
sections/hero.liquid
{% schema %}
{
"name": "Hero","settings": [
{
"type": "image_picker","id": "image","label": "Image","info": "1400 x 700 recommended"
},{
"type": "text","id": "bg_img_size_desktop","label": "Image Size (for desktop):","default": "cover","info": "Possible values: cover,contain,310%..."
},...
现在我想在我的主题的 CSS 文件中访问该值。
assets/main.scss.liquid
.hero__image {
background-size: {{ section.settings.bg_img_size_desktop }};
}
不幸的是,看起来包含 CSS 的液体文件无法访问 section.settings
,因为在呈现 CSS 时,它会显示:
.hero__image {
background-size: ;
}
我做错了吗?还是我必须在主题文件中包含该 CSS?这有效:
sections/hero.liquid
<style>
.hero__image {
background-size: {{ section.settings.bg_img_size_desktop }};
}
</style>
但我觉得必须有一种方法可以将动态 CSS 与主题的其余 CSS 保持一致。如果有知情人士在此提供任何指导,我将不胜感激。
解决方法
您无法将部分值访问到主题主 SCSS 文件中,您只能将这些值访问到相同的部分文件中,即 (hero.liquid) 在您的情况下。
要使用主 SCSS 来处理这些,您可以根据这些值分配一个唯一的类,然后使用这些类将样式应用到主 SCSS 文件中。
就像当您选择 cover
这样的选项值时,您可以像此代码段一样分配类
<div class="bg-{{section.settings.bg_img_size_desktop }}"></div>
或
<div class="{% section.settings.bg_img_size_desktop == 'cover' %}custom class{% endif %}"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。