Sass étendre avec sélecteurs de pseudo

Je suis à l'aide de la boussole de la gestion de certains fichiers sass sur mac osx. J'ai ces fichiers:

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

Dans les polices que j'ai cette règle que je voudrais réutiliser @étendre.

//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";
}

Dans les fonctions que j'ai cet écran.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" );
   }
 }

Enfin dans les fonctions.scss, j'appelle cela:

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

Est-il un moyen de référence .icône-ab-logo:avant d'utiliser un mixin? Solutions de contournement?
Merci pour la lecture.

OriginalL'auteur Simon | 2013-06-19

  1. 7

    Lorsque vous souhaitez étendre une pseudo-classe ou pseudo-élément, vous voulez juste pour prolonger le parent sélecteur (ie. tout ce qui vient avant le deux-points).

    %foo:before {
  color: red;
}

.bar {
  @extend %foo;
}

    Génère:

    .bar:before {
  color: red;
}

    Donc, pour votre exemple, ce que vous voulez faire est ceci:

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

    Être conscient que votre mixin génère un beaucoup de styles, de sorte qu'il n'est pas vraiment adapté pour de nombreuses réutilisations. Il serait beaucoup plus judicieux d'étendre cette.

    Ce n'travail. Mais oui ce n'est pas une bonne idée, comme vous l'avez dit. Merci d'avoir pris le temps de répondre à ma question.

    OriginalL'auteur cimmanon

  2. 3

    Semble que SASS ne fonctionne pas si bien avec les pseudo-éléments s'étend.

    Travail autour de la question comme ceci:

    %before-icon
  color: red

.foo
  /* Some styles here */

  &:before
    @extend %before-icon

    Résultat:

    .foo:before {
  color: red;
}

.foo {
  /* Some styles here */
}

    Aussi, on dirait que vous êtes de compliquer à l'excès des choses. Vous trouverez votre code difficile à comprendre et à maintenir.

    PS Vous devriez garder mixin dans _mixins.scss.

    OriginalL'auteur Andrey Mikhaylov - lolmaus

  3. 2

    Comme l'a dit avant, vous devriez essayer d'utiliser l'espace réservé de la classe. En revanche toujours d'abord considérer @mixin d'abord et essayer d'éviter de nidification avec @étendre.

    Le principe de base de la accepté de répondre est l'aide de l'étendre. Cependant, il ya quelques inconvénients de l'utilisation d'une extension. Quelque chose de pourquoi vous avez peut-être aussi envie de l'éviter? Le plus grand inconvénient est que l'utilisation s'étend peut devenir très salissant et ne respecte pas la source de l'ordre, comme expliqué ici: sitepoint.com/sass-extend-nobody-told-you.

    OriginalL'auteur