0

我第一次使用 Shopify，它是建立在不同技术的相当令人眼花缭乱的组合之上的，但我相当肯定我的实际问题归结为简单的 CSS。

在我使用的 Shopify 主题Motion by Archetype 中，“褪色图像”块类型的最小高度为“250”（由于某种原因实际上是 250 像素 * 0.65）。它有一组百步大小：250、350、450 等。

奇怪的是，这些尺寸是非常硬编码的。控件是这样定义的：

{
    "type": "range",
    "id": "section_height",
    "label": "Section height",
    "default": 650,
    "min": 250,
    "max": 750,
    "step": 100,
    "unit": "px"
  }

并且这些离散的步骤被转换成 HTML 类名，出于某种奇怪的原因：

<div class="fading-images fading-images--{{ section.id }} fading-images--{{ section.settings.section_height }} fading-images-overlay__overlay loading">

最后，在主题的 scss 中有一组静态的、硬编码的选项：

.fading-images--250 {
  height: floor(250px * 0.65);
}

.fading-images--350 {
  height: floor(350px * 0.65);
}

//etc

现在，对我来说，这似乎是限制性和奇怪的。我想动态地将高度设置到我该死的滑块上的任何位置。如果我想要一个 456px 高的 div，我看不出这应该是个问题。

为此，我将这一行添加到块类型定义的内置部分中，并将基于大小的分类替换为通用的一刀切：

<style>
  .fading-images--{{ section.id }} .fading-images__sizer {
    height: {{ section.settings.section_height | times: 0.65 | floor}}px;
  }
  .fading-images--{{ section.id }} .fading-images-overlay__title {
    font-size: {{ section.settings.title_size | times: 0.5 }}px;
  }
  // ...
</style>

和

<div class="fading-images fading-images--{{ section.id }} fading-images__sizer fading-images-overlay__overlay loading">

我确定 Liquid Ruby 位工作正常，并且相关语句正在正确解析（例如“高度：296px;”），但 div 实际上没有正确调整大小。在 Chrome 的开发工具中检查 div 显示它具有“fading-images__sizer”类，但 height 属性似乎没有改变。

我相当肯定这一定是一个小而愚蠢的问题，但如果我明白它是什么，我该死的。这特别令人费解，因为非常相似的语句在完全相同的设置下完美执行 - 请注意我包含的 font-size 语句，它运行良好。

任何帮助将不胜感激！

4

0 回答 0