Flynt WordPress主题SASS样式作用域失效问题求助

问题核心 #

在Flynt WordPress主题中开发BackgroundImagesStackable组件时，非嵌套的SASS样式可正常生效，但将样式嵌套到组件根选择器.flynt-component[name='BackgroundImagesStackable']内部后，样式完全失效（其他组件的嵌套作用域样式工作正常）。

正常运行的非嵌套代码 #

.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 */
  }

}

问题原因 #

嵌套代码中的伪元素选择器错误是核心问题：
你在嵌套内部写了.flynt-component[name='BackgroundImagesStackable']::after，编译后会生成：

.flynt-component[name='BackgroundImagesStackable'] .flynt-component[name='BackgroundImagesStackable']::after {
  /* 样式 */
}

这个选择器试图匹配根组件内部的另一个同名组件根元素的伪元素，而你的组件HTML结构中显然不存在这样的层级，导致伪元素样式完全不生效。如果其他内部类的样式也失效，可能是SASS编译错误或HTML结构不匹配，但最可能的触发点是这个错误选择器导致的编译异常或优先级问题。

修复方案 #

将伪元素选择器改为使用SASS的父选择器引用&，这样编译后会正确指向根组件的伪元素：

修复后的嵌套代码 #

.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;
  }
  
  /* 使用&引用父选择器 */
  &::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 */
  }
}

额外排查点 #

如果修复后仍有问题，可检查以下内容：

• 查看SASS编译后的CSS文件，确认嵌套选择器是否正确生成（比如.flynt-component[name='BackgroundImagesStackable'] .background-images-stackable）
• 检查组件HTML结构，确保.background-images-stackable、.background-image等类确实是`.flynt-component[name='BackgroundImagesStackable']``的直接或间接子元素
• 用浏览器开发者工具检查元素样式，看是否有其他高优先级CSS规则覆盖了当前样式

内容的提问来源于stack exchange，提问作者Christian Stoyanov