你好可爱的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! :)
}
我想知道我怎么能得到这个 . 也许创造一个新的混合?
我很欣赏所有/任何想法 .