如何访问CSS文件中的节设置值

Question

在我的一个主题文件中，我让网站创建者能够使用模式设置元素的background-size属性

章节/英雄液体

{% 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文件中访问这个值。

资产/main.scss.liquid

.hero__image {
background-size: {{ section.settings.bg_img_size_desktop }};
}

不幸的是，它看起来不像包含CSS的液体文件可以访问section.settings，因为当CSS被渲染时，它显示：

.hero__image {
background-size: ;
}

我做错什么了吗？或者我必须在主题文件中包含CSS吗？这项工作：

章节/英雄液体

<style>
.hero__image {
background-size: {{ section.settings.bg_img_size_desktop }};
}
</style>

但我觉得必须有一种方法来保持这个主题的动态CSS和其他CSS。如果任何知情人士在这里有任何指导，我将不胜感激。

Answer 1

您不能将节值访问到主题主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>