function - first - Sass se extiende con pseudo selectores

not child css

Question

Estoy usando una brújula para administrar algunos archivos sass en mac osx. Tengo estos archivos:

sass/
screen.scss
partials folder/
...
_fonts.scss
_functions.scss
...

En fuentes tengo esta regla que me gustaría volver a usar @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";
}

En funciones tengo esta 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" );
}
}

Finalmente en functions.scss llamo esto:

 @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.
}

¿Hay alguna manera de hacer referencia a .icon-ab-logo: antes de usar un mixin? ¿Soluciones provisionales? Gracias por leer.

Answer 1

Cuando desee extender una pseudo clase o pseudo elemento, solo desea extender el selector principal (es decir, todo lo que viene antes de los dos puntos).

%foo:before {
color: red;
}
.bar {
@extend %foo;
}

Genera:

.bar:before {
color: red;
}

Entonces, para su instancia, lo que quiere hacer es esto:

.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'');
}

Tenga en cuenta que su mixin genera muchos estilos, por lo que no es realmente adecuado para una reutilización extensa. Tendría mucho más sentido extender eso también.

Answer 2

Parece que SASS no funciona tan bien con los pseudo elementos en extends.

Solucione el problema de esta manera:

%before-icon
color: red
.foo
/* Some styles here */
&:before
@extend %before-icon

Resultado:

.foo:before {
color: red;
}
.foo {
/* Some styles here */
}

Además, parece que estás complicando las cosas. Encontrará que su código es difícil de comprender y mantener.

PD Debes mantener mixins en _mixins.scss .