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

Question

在我的一个主题文件中，我让网站创建者能够使用架构设置元素的 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 保持一致。如果有知情人士在这里有任何指导，我将不胜感激。

Answer 1

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

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

就像当您选择像cover 这样的选项值时，您可以像这样分配类sn-p

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

或

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