你好可爱的stackoverflow社区 . 我是一名新的编码员,也是sass和中级css主题的新手 . 我正在开发一个有主题的网站,我正在尝试自定义我们正在使用的第三方调查小部件的设计 .

我们的主题通过mixin来控制,如下所示:

@mixin themify() {
 // Iterate over the themes
 @each $theme-name, $theme in $themes {
   $current-theme: $theme !global;
   @if $theme-name == ‘abc’ {
     @content;
   } @else {
     .theme-#{$theme-name} & {
       @content;
      }
    }
  }
}

主题名称位于body标签上并由每个元素继承 . 所以可以轻松地针对所有孩子 . 但是,对于调查,我需要使用针对正文的特定数据属性的选择器来设置样式 . 例如,这个选择器成功地允许我定位一个调查元素:

Body[data-survey-number='77777'] div#a .b {
    // styles successfully applied!
}

但是当我想使用theify mixin时:

Body[data-survey-number='77777'] div#a .b {
    @include themify {
        background-color:theme-get(secondary-color);
}

它打破了 . 我看到sass汇编为:

theme-name Body[data-survey-number='77777'] div#a .b {
    // never applies to anything :(
}

然而,当选择器被编译为此时(在末尾附加没有空格),有效的方法是:

Body[data-survey-number='77777']theme-name div#a .b {
    // this works! :)
}

我想知道我怎么能得到这个 . 也许创造一个新的混合?

我很欣赏所有/任何想法 .