我正在使用@ at-root相当多(因为类是动态添加并从主体中删除),我想知道下面的内容是否可行?
header.main {
@at-root body[class*="contact"] #{&}, body.text-single #{&} {
background-color: white;
&.header-is--hidden {
background-color: red; // I know this won't work
}
}
}
而不是必须写:
header.main {
@at-root body[class*="contact"] #{&}, body.text-single #{&} {
background-color: white;
}
@at-root body[class*="contact"].header-is--hidden #{&}, body.text-single.header-is--hidden #{&} {
background-color: red;
}
}
我想知道下面的东西是否可能?
是的
您可以将header.main选择器保存在变量中,并使用插值将其渲染出来 - 如:
header.main {
$sel: &; // contains header.main
@at-root body[class*="contact"], body.text-single {
#{$sel} {
background-color: white;
}
&.header-is--hidden #{$sel} {
background-color: red;
}
}
}
CSS输出
body[class*="contact"] header.main,
body.text-single header.main {
background-color: white;
}
body[class*="contact"].header-is--hidden header.main,
body.text-single.header-is--hidden header.main {
background-color: red;
}
我想知道下面的东西是否可能?
是的
您可以将header.main选择器保存在变量中,并使用插值将其渲染出来 - 如:
header.main {
$sel: &; // contains header.main
@at-root body[class*="contact"], body.text-single {
#{$sel} {
background-color: white;
}
&.header-is--hidden #{$sel} {
background-color: red;
}
}
}
CSS输出
body[class*="contact"] header.main,
body.text-single header.main {
background-color: white;
}
body[class*="contact"].header-is--hidden header.main,
body.text-single.header-is--hidden header.main {
background-color: red;
}