Question

我以前从未使用过.scss文件，而是尝试进行简单的更改。

&-tabbed {
  //some code
}
&-list {
   //some other code
}
&-tableau {
  //some code
}

我想让第三个选项与没有新类的第一个选项相同。我该如何做到这一点？

Answer 1

您可以使用@extend它将复制所有样式并提供给您想要的课程

.wrapper {
  &-tabbed {
    color: red;
    font-size: 1rem;
  }
  &-list {
     //some other code
  }
  &-tableau {
    @extend .wrapper-tabbed
  }
}

结果将是那样的

.wrapper-tabbed, .wrapper-tableau {
  color: red;
  font-size: 1rem;
}

您还可以使用占位符选择器

%placeholder {
  color: red;
  font-size: 1rem;
}


.wrapper {
  &-tabbed {
    @extend %placeholder;
  }
  &-list {
     //some other code
  }
  &-tableau {
    @extend  %placeholder;
  }
}

结果将是相同的

.wrapper-tabbed, .wrapper-tableau {
  color: red;
  font-size: 1rem;
}

MIXIN用法 注意它会将样式呈现2次而不扩展它

@mixin styles{
  color: red;
  font-size: 1rem;
}

.wrapper {
  &-tabbed {
    @include styles;
  }

  &-tableau {
    @include styles;  
  }
}

结果将是那样的

.wrapper-tabbed {
  color: red;
  font-size: 1rem;
}
.wrapper-tableau {
  color: red;
  font-size: 1rem;
}

Answer 2

创建一个Mixin。

@mixin mixinname{

width:100px;
height:100px;
border:1px solid #000;

}

Add this mixin
&-tabbed {

  @include mixinname;

}

&-tableau {
      @include mixinname;  
}

Answer 3

您不需要混音或任何特殊代码。只需将规则与,分开css：

&-tabbed,
&-tableau {
  //some code
}
&-list {
 //some other code
}

SCSS＆amp; - 多个字符串选项

3 个答案: