El uso de mezcla mixta scss y extensión de herencia (herencia)

Heredar (extender)

comprender:

Contiene múltiples estilos de 'variables', se compilará y analizará una clase de estilo normal, ya sea heredada o no.

Si la clase de estilo escrita solo para herencia no desea compilarse ni analizarse, se puede usar el marcador de posición % para definir la clase de estilo.

Al analizar, los selectores que utilizan la clase de estilo heredada se copian juntos y se copia el selector, no la clase de estilo definida.

Uso básico:

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

Herencia no compilada

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

Limitación 1: Alcance

Solo las fuentes de herencia dentro de esta directiva se pueden usar en las directivas @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; } }

Limitación 2: heredar la especificación del selector de fuente

El selector de la fuente de herencia no admite la combinación. Intente usar un solo selector. Ni el selector de descendientes ( ) ni el selector de hermanos (+) se pueden usar como fuente de herencia. Una vez analizada la fuente de herencia, es un selector de un nombre, no descendiente de nadie, o hermanos, de lo contrario, el selector fallará después del análisis. A continuación se muestran dos ejemplos

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