SASS/SCSS @extendルールセレクタ

Question

私は@extend規則に少し問題を抱えている、これは私が（H1に焦点）得たものである：

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

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

だから、それは次のようになります。

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

しかし、それは@extendのようではない、これを与えることなく他の方法はh1クラスを与えることですか？

Answer 1

ネストされたセレクタを拡張することはできません。実際は、パーサーによって報告される構文エラーです。構造上のコメントは別として（上記の@extend関係が正当なシナリオは考えられませんが）、これは現在SASSで達成できるものではありません。

NB：これは開いていればStylusでサポートされています。

Answer 2

あなたの.content-header h1定義に対して新しい@mixin your-nameを定義し、.box-header h1の範囲に@include your-nameを定義することは明白な解決策です。

しかし、はるかに優れたソリューションReferencing Parent Selectors: &があります：

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

は、ロジックが逆転するのでそれは明白ではないのですが、それは維持する方が良いでしょう。特定のセレクタについてh1の定義を変更しています。

Answer 3

ネストされた@extendは許可されません。 「 - 」区切るために、私は私の個人的のために構築いくつかの事はあなたのすべてと共有の下に使う特殊文字は、私が使用する命名規則で許可されていないので、これは動的に、セレクタを構築

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

を回避するためにこれを試してみてくださいクラス

$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(); 

Good Luck !!