Sass使用伪选择器进行扩展 [英] Sass extend with pseudo selectors
问题描述
我使用指南针来管理mac osx上的一些sass文件。我有这些文件:
I am using compass to manage some sass files on mac osx. I have these files:
sass/
screen.scss
partials folder/
...
_fonts.scss
_functions.scss
...
在字体中,我有这个规则,我想重用@extend。
In fonts I have this rule which I would like to reuse @extend.
//fonts.scss
.icon-ab-logo, {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-ab-logo:before { //i want to reuse this.
content: "\e000";
}
在我有这个screen.scss的函数中:
In functions I have this screen.scss:
.logo {
position: absolute;
top: 0;
bottom: 0px;
z-index: 500;
width: 9.5em;
background: $logo;
@include transition(all 0.2s);
&:after{
@include icon( ".icon-ab-logo" );
}
}
最后在functions.scss中我称之为:
Finally in functions.scss I call this:
@mixin icon( $icon ){
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
@extend #{$icon}:before; //<- this is the problem, no errors just isn't parsed.
}
有没有办法引用.icon-ab-logo:混入?解决方法?
感谢您阅读。
Is there a way to reference .icon-ab-logo:before using a mixin? Workarounds? Thanks for reading.
推荐答案
当您想要扩展一个伪类或伪元素时,您只需要扩展
When you want to extend a pseudo class or pseudo element, you just want to extend the parent selector (ie. everything that comes before the colon).
%foo:before {
color: red;
}
.bar {
@extend %foo;
}
生成:
Generates:
.bar:before {
color: red;
}
所以对于你的实例,你想要做的是这样的:
So for your instance, what you want to do is this:
.icon-ab-logo, {
font: 100%/1 'icomoon'; // use the shorthand
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
%foo:before, .icon-ab-logo:before { //i want to reuse this.
content: "\e000";
}
@mixin icon( $icon ){
font: 100%/1 'icomoon'; // use the shorthand
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
@extend #{$icon};
}
.bar {
@include icon('%foo');
}
请注意,您的mixin会生成 样式,所以它不适合广泛的重用。如果要延长这一点,会更有意义。
Be aware that your mixin generates a lot of styles, so it's not really suitable for extensive reuse. It would make a lot more sense to be extending that as well.
这篇关于Sass使用伪选择器进行扩展的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!