sass @extend @include

@extend 和 @include 是 Sass 中的两个关键字，用于在样式表中重用代码块。

@extend 关键字用于继承已定义的样式块，可以将一个选择器的样式继承到另一个选择器中。这有助于减少代码的重复，提高样式表的维护性。例如：

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

.submit-button {
  @extend .button;
  font-size: 14px;
}

在上面的例子中，.submit-button 类选择器继承了 .button 类选择器的样式，所以.submit-button 元素将继承 .button 的背景色、字体颜色和内边距样式。

@include 关键字用于将一个 mixin（混合）包含进当前选择器中。mixin 是一段可重用的代码块，可以在需要的地方调用。例如：

@mixin button-style {
  background-color: blue;
  color: white;
  padding: 10px;
}

.button {
  @include button-style;
}

.submit-button {
  @include button-style;
  font-size: 14px;
}

在上面的例子中，我们定义了一个名为 button-style 的 mixin，其中包含了按钮的样式。然后我们分别在 .button 和 .submit-button 类选择器中调用了这个 mixin，这样它们都会应用相同的样式。

总结一下，@extend 用于继承已定义的样式块，而 @include 用于包含 mixin 中的样式块。它们都是 Sass 中非常有用的功能，可以帮助我们更好地组织和重用样式代码。