19

@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クラスを与えずにこれを書く他の方法はありますか??

4

4 に答える 4

9

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

注意: ただし、これはStylusでサポートされています。

于 2012-06-25T22:49:35.480 に答える
6

@mixin your-name明らかな解決策は、.content-header h1定義と@include your-name内でnew を定義すること.box-header h1です。

しかし、親セレクターを参照するより良い解決策があります: & :

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

論理が逆なのでわかりにくいですが、維持したほうがいいです。h1特定のセレクターの の定義を変更しています。

于 2013-05-26T14:21:32.320 に答える
1

ネストされた @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();

幸運を！！

于 2016-03-23T04:49:19.317 に答える
0

すでに述べたように、拡張できるクラスは 1 つだけです。通常、extend によるネストはスキップする必要があります。このテキストでは、extend とそのオプションについて詳しく説明しています。

于 2018-03-13T11:16:30.470 に答える