2012-06-25 15 views
15

Sto avendo un piccolo problema con la regola @extend, questo è quello che ho ottenuto (focus sul H1):SASS/SCSS regola @extend selettori

.content-header { 
    // CSS properties 
    h1 { 
     // CSS properties 
    } 
} 

.box-header { 
    // CSS properties 
    h1 { 
     @extend .content-header h1; // My selector problem! 
     // And his own CSS properties 
    } 
} 

così sarà:

.content-header h1, .box-header h1 { 
    /* Happily sharing the same CSS properties */ 
} 

Ma sembra che @extend non mi piace, è un altro modo di scrivere questo senza dare la classe h1 ??

risposta

8

I selettori annidati non possono essere estesi - in effetti, questo è l'errore di sintassi segnalato dal parser. Commenti strutturali a parte (non riesco a pensare a uno scenario in cui sia giustificata la relazione di cui sopra @extend), questo non è qualcosa che può essere correntemente realizzato con SASS.

NB: questo è, tuttavia supportato da Stylus se si è aperti ad esso.

+0

Sono aperto, proviamo! grazie mille! ;) –

4

Una soluzione ovvia sarebbe quella di definire un nuovo @mixin your-name per le definizioni .content-header h1 e @include your-name all'interno di .box-header h1.

Ma, c'è una soluzione molto migliore Referencing Parent Selectors: &:

h1 { 
    .content-header &, 
    .box-header & { 
     // CSS properties 
    } 
    .box-header & { 
     // And his own CSS properties 
    } 
} 

Non è evidente perché la logica inversa, ma è meglio mantenere. Stai modificando le definizioni di h1 per un selettore specifico.

0

Nested @extend non è consentito. Prova questo per un lavoro in giro

.foo { 
    background-color: lime;  
} 
.b{ 
    margin:0px; 
} 
.baz { 
    @extend .foo; 
    @extend .b; 
} 

Qualche cosa ho costruito per i miei personel utilizzare sotto la condivisione con tutti voi, questo costruisce in modo dinamico il selettore, Dal momento che i caratteri speciali non sono ammessi nelle convenzioni di denominazione che ho usato '-' per separare classe

$ih-classes: ("module--cardContainer--header", 
       "a" 
      ); 
    %module--cardContainer--header { 
    color: #1e1d1c; 
    background-color: #fff; 
    border-bottom: 0.0714rem solid #e0dddc; 
    padding: 0; 
    line-height: 3.1429rem; 
    font-size: 1.2857rem; 
    font-family: ProximaNovaSemiBold; 
} 
%a{ 
    color:red; 
} 

@function str-replace($string, $search, $replace: '') { 
    $index: str-index($string, $search); 

    @if $index { 
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 
    } 

    @return $string; 
} 
@mixin generate-framework-code() { 

       @each $icon in $ih-classes { 
       $val : str-replace($icon, '--', ' .'); 
        .#{$val} { 
          @extend %#{$icon}; 
         } 
        } 
} 

@include generate-framework-code(); 

Buona fortuna !!