scss中@mixin和@include

在 Sass 中，@include指令用于在您的样式中包含一个 mixin。mixin 是可重用的样式块，您可以将其包含在样式表的多个位置。
以下是如何使用该@include指令的示例：

@mixin rounded-corners{border-radius: 5px;}.button{@include rounded-corners;background-color: blue;color: white;padding: 10px;}.card{@include rounded-corners;background-color: white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);padding: 20px;}

在此示例中，rounded-cornersmixin 是使用border-radius属性定义的。该@include指令用于将 mixin 包含在.button和.card类中。这将生成以下 CSS：

.button{border-radius: 5px;background-color: blue;color: white;padding: 10px;}.card{border-radius: 5px;background-color: white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);padding: 20px;}

该@include指令还可用于将参数传递给混入。

@mixinrounded-corners($radius){border-radius: $radius;}.button{@includerounded-corners(5px);background-color: blue;color: white;padding: 10px;}.card{@includerounded-corners(10px);background-color: white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);padding: 20px;}

例如：在此示例中，rounded-cornersmixin 接受单个参数，

$radius

用于设置border-radius属性。该@include指令用于将不同的值传递$radius给每个类的混合。这将生成以下 CSS：

.button{border-radius: 5px;background-color: blue;color: white;padding: 10px;}.card{border-radius: 10px;background-color: white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);padding: 20px;}