scss混合ミックスインと継承拡張（継承）の使用

継承（拡張）

理解する：

'変数'の複数のスタイルが含まれ、継承されているかどうかに関係なく、通常のスタイルクラスがコンパイルおよび解析されます。

継承のみのために記述されたスタイルクラスをコンパイルおよび解析したくない場合は、プレースホルダー％を使用してスタイルクラスを定義できます。

解析時に、継承されたスタイルクラスを使用するセレクターが一緒にコピーされ、定義されたスタイルクラスではなくセレクターがコピーされます。

基本的な使用法：

定义继承：
.box1 {
    /* css 声明 */
}
 
 
使用继承：
.box2{
    @extend .box1;
    ...
}
 
解析格式：
.box, .bo2{
    /* css 声明 */
}

継承がコンパイルされていません

定义继承：
%box1 {
    /* css 声明 */
}
 
 
使用继承：
.box2{
    @extend %box1;
    ...
}
 
解析格式：
.bo2{
    /* css 声明 */
}

制限1：範囲

@mediaディレクティブで使用できるのは、このディレクティブ内の継承ソースのみです。

写法一：
.box1{
   width: 200px;
   margin-right: 20px;
   background-color: pink;
}
@media screen and (max-width: 300px){
.box1{
  @extend .box1
}

写法二：
.box1{
   width: 200px;
   margin-right: 20px;
   background-color: pink;
 }
@media screen and (max-width: 300px){
  .box1{
    color: white;
  }
  .box2{
    @extend .box1
  }
}

// 报错：
DEPRECATION WARNING: Passing --sourcemap without a value is deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
      error test.scss (Line 5: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .box1" on line 19 of test.scss.
)

写法三
@media screen and (max-width: 300px){
  .box1{
    color: white;
  }
  .box2{
    @extend .box1;
    width: 200px;
  }
}

正常编译
@media screen and (max-width: 300px) {
  .box1, .box2 {
    color: white; }

  .box2 {
    width: 200px; } }

制限2：ソースセレクター仕様の継承

継承ソースのセレクターは組み合わせをサポートしていません。単一のセレクターを使用してみてください。子孫セレクター（）も兄弟セレクター（+）も継承ソースとして使用できません。継承ソースが解析された後は、セレクターになります。誰かの子孫ではなく、名前の子孫、または兄弟、そうでない場合、セレクターは解析後に失敗します。以下は2つの例です

// html
<div class="box1">
    <div class="box2"></div>
</div>
<div class="div1">
    <div class="div2"></div>
</div>


// scss 写法一
.box1 .box2{
    width: 100px;
}
.div1 {
    @extend .box2;
    height:100px;
}


// 解析一
.box1 .box2, .box1 .div1 {    // 出错  div1并不是box1的后代
  width: 100px; }

.div1 {
  height: 100px; }


// scss 写法二
.box1 .box2{
    width: 100px;
}
.div1 .div2{
    @extend .box2;
    height:100px;
}


// 解析一
.box1 .box2, .box1 .div1 .div2, .div1 .box1 .div2 {   // 出错
  width: 100px; }

.div1 .div2 {
  height: 100px; }