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 .