名为 Flynt 的 WordPress 主题上的 SASS 范围问题

Question

我对范围界定有疑问，但我不明白为什么。我正在使用带有组件的 Flynt wordpress 主题。我正在尝试构建一个具有作用域的组件，但它不起作用（我已经看到其他作用域组件工作得很好），这是我的 SASS(CSS) 的工作原理：

.flynt-component[name='BackgroundImagesStackable'] {
  position: relative; 
}
  .background-images-stackable {
    position: relative;
  }

  .background-image {
      position: relative;
    z-index: 1;
  }

  .stacked-image {
    inline-size: 50%;
    inset-block-start: 50%; 
    inset-inline-start: 50%; 
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

但是当我尝试确定元素范围时它不起作用：

.flynt-component[name='BackgroundImagesStackable'] {
  position: relative; 

  .background-images-stackable {
    position: relative;
  }

  .background-image {
      position: relative;
    z-index: 1;
  }

  .stacked-image {
    inline-size: 50%;
    inset-block-start: 50%; 
    inset-inline-start: 50%; 
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  
  
  .flynt-component[name='BackgroundImagesStackable']::after {
    background-color: #ffc0cb;
    block-size: 100%;
    content: "Test"; /* Adjust content as needed */
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    position: absolute;
    z-index: 0; /* Lower than both images */
  }

}

我尝试了几种范围界定解决方案，但没有一个给我任何解决问题的提示

Answer 1

看起来有一个不正确的嵌套选择器：

.flynt-component[name='BackgroundImagesStackable']::after

这应该写成

&::after

。

除此之外，一切看起来都很好！

您可以分享您的组件标记以进一步研究这个问题吗？