SASS | @mixin 和 @include

SASS是一种CSS预处理器，它允许程序员在CSS中使用变量、函数、嵌套和其他有用的编程概念，从而可以更快、更快速地编写CSS。SASS中的@mixin和@include是两个非常有用的功能，它们可以帮助您更好地组织代码并减少重复。

@mixin

@mixin是SASS中的一个功能，它允许您定义一些可重用的CSS代码块。可以将@mixin视为一个不生成任何CSS样式的函数。例如，我们可以定义一个名为“center”的@mixin，它将使元素水平和垂直居中。

@mixin center {
  // 使元素水平和垂直居中
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

这是一个非常基本的@mixin，实际上我们可以定义更复杂的@mixin来满足我们的需求。例如，我们可以定义一个名为“flexbox”的@mixin，它将为我们自动生成一个flexbox容器。

@mixin flexbox($direction: row, $wrap: nowrap, $justify: flex-start, $align: stretch) {
  display: flex;  
  flex-direction: $direction;
  flex-wrap: $wrap;
  justify-content: $justify;
  align-items: $align;
}

在这个例子中，我们的@mixin有一些带有默认值的可选参数，这意味着您可以根据自己的需要轻松地使用它。

@include

@include是另一个非常有用的SASS功能，它可以将@mixin应用于CSS规则中。例如，我们可以使用@include来将我们前面定义的“center”@mixin应用于某个元素。

.centered {
  @include center;
}

在这个例子中，我们创建了一个具有“centered”类的元素，并使用@include来应用“center”@mixin。这将使所选元素居中。

我们还可以使用@include来应用我们前面定制的“flexbox”@mixin。

.flex-container {
  @include flexbox(column, wrap, center, center);
}

在这个例子中，我们使用@include将“flexbox”@mixin应用于一个名为“.flex-container”的元素。这将使它成为一个垂直方向的flexbox容器，具有换行功能并在垂直和水平方向上居中。

总结

在这篇文章中，我们介绍了SASS中的两个非常有用的功能，@mixin和@include。这些功能可以帮助您更好地组织您的CSS，使您的代码更少、更模块化。它允许您重复使用您的CSS代码，从而节省时间和努力。