CSS 在SASS/SCSS中复用样式而不合并选择器

在本文中，我们将介绍如何在SASS/SCSS中复用样式而不合并选择器。SASS（Syntactically Awesome Style Sheets）和SCSS（Sassy CSS）是CSS的扩展语言，提供了更多的功能和灵活性。

阅读更多：CSS 教程

什么是SASS/SCSS

SASS是一种CSS预处理器，它允许我们使用变量、嵌套规则、混合（mixins）、继承和函数等功能，使样式表更加模块化。SCSS是SASS的一种扩展语法，与传统的CSS语法相似，且兼容CSS的所有语法。

使用变量

使用变量是在SASS/SCSS中复用样式的一种有效方法。可以使用变量来存储颜色、字体、边距等常用的属性值，并通过引用变量来使用这些属性值。

$primary-color: #3498db;
$font-family: Arial, sans-serif;

.button {
  background-color: $primary-color;
  color: white;
  font-family: $font-family;
  padding: 10px;
}

在上面的例子中，我们定义了两个变量$primary-color和$font-family，并在button类中使用了这些变量。这样，我们只需要修改变量的值，就可以同时更改多个样式。

使用混合

混合是一种将一组CSS属性定义为一个可重用的代码块，并在需要时引用它的方法。在SASS/SCSS中，可以使用混合来复用一组样式。

@mixin button-style {
  background-color: #3498db;
  color: white;
  padding: 10px;
}

.button {
  @include button-style;
}

.button-small {
  @include button-style;
  font-size: 12px;
}

.button-large {
  @include button-style;
  font-size: 18px;
}

在上面的例子中，我们使用@mixin定义了一个名为button-style的混合，在按钮类中使用@include button-style引用该混合。这样，我们可以在button-small类和button-large类中复用button-style的样式，并添加额外的属性。

使用继承

继承是一种通过将一个选择器的样式应用于另一个选择器来复用样式的方法。在SASS/SCSS中，可以使用@extend指令实现继承。

.button {
  background-color: #3498db;
  color: white;
  padding: 10px;
}

.button-small {
  @extend .button;
  font-size: 12px;
}

.button-large {
  @extend .button;
  font-size: 18px;
}

在上面的例子中，我们使用@extend .button将.button类的样式应用于.button-small类和.button-large类。这样，.button-small和.button-large将继承.button的所有样式。

使用占位符选择器

占位符选择器是一种定义样式而不生成任何CSS选择器的方法。在SASS/SCSS中，可以使用%定义占位符选择器，并使用@extend指令引用它。

%button-style {
  background-color: #3498db;
  color: white;
  padding: 10px;
}

.button {
  @extend %button-style;
}

.button-small {
  @extend %button-style;
  font-size: 12px;
}

.button-large {
  @extend %button-style;
  font-size: 18px;
}

在上面的例子中，我们使用%button-style定义了一个名为button-style的占位符选择器，并在.button、.button-small和.button-large类中使用@extend指令引用它。这样，占位符选择器的样式将被应用于所有引用它的类。