如何在 scss 中使用祖父选择器 [英] how to use grandparent selector in scss
问题描述
我需要使用不同颜色的图标在 5 种状态中设置我的按钮组件的样式,并用于以下 css
I need to style my button component in 5 states with differently colored icon and use for this following css
#add-member-dialog #add-username-to-list .to-list-button-icon:before {
content: url("../images/func_personplus_16_ena.png");
}
#add-member-dialog #add-username-to-list:hover .to-list-button-icon:before {
content: url("../images/func_personplus_16_hov.png");
}
#add-member-dialog #add-username-to-list:disabled .to-list-button-icon:before {
content: url("../images/func_personplus_16_dis.png");
}
#add-member-dialog #add-username-to-list:active .to-list-button-icon:before {
content: url("../images/func_personplus_16_act.png");
}
#add-member-dialog #add-username-to-list:active:hover .to-list-button-icon:before {
content: url("../images/func_personplus_16_onb.png");
}
此类项目在与#add-username-to-list 相关的伪类中有所不同.我试图将整个 css 文件切换到 scss 并想优化这种样式,但我无法进一步:
such items differs in pseudoclasses related to #add-username-to-list. I tried to switch entire css file to scss and wanted to optimize this style but I was not able move further than:
#add-member-dialog {
#add-username-to-list {
.to-list-button-icon:before {
content: url("../images/func_personplus_16_ena.png");
}
&:hover .to-list-button-icon:before {
content: url("../images/func_personplus_16_hov.png");
}
&:disabled .to-list-button-icon:before {
content: url("../images/func_personplus_16_dis.png");
}
&:active .to-list-button-icon:before {
content: url("../images/func_personplus_16_act.png");
}
&:active:hover .to-list-button-icon:before {
content: url("../images/func_personplus_16_onb.png");
}
}
}
可以做这样的事情吗?
#add-member-dialog {
#add-username-to-list {
.to-list-button-icon:before {
content: url("../images/func_personplus_16_ena.png");
&&:hover & {
content: url("../images/func_personplus_16_hov.png");
}
...
}
}
}
其中 &&
将代表祖父选择器 #add-username-to-list
.
where &&
will represents grandparent selector #add-username-to-list
.
我也尝试应用模式 #{$grandparent}:tmp $
但结果选择器看起来像这样:#add-member-dialog #add-username-to-list:tmp #add-member-dialog #add-username-to-list .to-list-button-icon:before
I also tried to apply pattern #{$grandparent}:tmp $
but the result selector looked like this: #add-member-dialog #add-username-to-list:tmp #add-member-dialog #add-username-to-list .to-list-button-icon:before
#add-member-dialog {
#add-username-to-list {
$grandparent: &;
.to-list-button-icon:before {
content: url("../images/func_personplus_16_ena.png");
#{$grandparent}:hover & {
content: url("../images/func_personplus_16_hov.png");
}
...
}
}
}
任何建议这是否可能?
推荐答案
你可以使用插值来打印你的祖父选择器(注意@at-root):
You can use interpolation to print out your grandparent selector (note the @at-root):
#add-member-dialog {
#add-username-to-list {
$g: &; // grandparent
$p: '../images/func_personplus_16_'; // icon path
@at-root {
.to-list-button-icon:before {
#{$g} & { content: url(#{$p}ena.png); }
#{$g}:hover & { content: url(#{$p}hov.png); }
#{$g}:disabled & { content: url(#{$p}dis.png); }
#{$g}:active & { content: url(#{$p}act.png); }
#{$g}:active:hover & { content: url(#{$p}onb.png); }
}
}
}
}
这篇关于如何在 scss 中使用祖父选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!