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

Question

在我的一个主题文件中，我让站点创建者能够使用 Schema

设置元素的 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 的 liquid 文件可以访问 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 保持动态。如果知道的人在这里有任何指导，我将不胜感激。

Answer 1

您无法将部分值访问到主题主 SCSS 文件中，您只能将这些值访问到相同的部分文件中，即在您的情况下（hero.liquid）。

要使用主 SCSS 来处理这些，您可以根据这些值分配一个唯一的 class，然后使用这些 class 将样式应用到主 SCSS 文件中。

就像你 select 一个像 cover 这样的选项值然后你分配 class 就像这个片段

<div class="bg-{{section.settings.bg_img_size_desktop }}"></div>

或

<div class="{% section.settings.bg_img_size_desktop == 'cover' %}custom class{% endif %}"></div>

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

How to access section settings values in CSS file

css

schema

shopify

settings