SASS Mixins 教程

SASS Mixins 教程

Mixin 是 Sass 的一个非常强大的特性。我们使用它们将多个 CSS 声明组合在一起，以便在我们的项目中重用。

假设我们要创建一个 mixin 来保存转换属性的供应商前缀。

在 SASS 中，我们会这样编码：

@mixin 变换 {
-webkit-transform：旋转（180度）；
-ms 变换：旋转（180 度）；
变换：旋转（180度）；
}

要将 mixin 添加到我们的代码中，然后我们使用 @包括 指令，如下所示：

.navbar {
背景颜色：红色；
填充：1rem；
ul {
列表样式：无；
}
李{
文本对齐：居中；
保证金：1rem；
@include 转换；
}
}

转换 mixin 中的所有代码现在都将应用于 李 元素。您还可以将值传递到您的 mixin 中，以使它们更加灵活。

不要添加指定的值，而是添加名称（使用变量，例如 财产 ) 来表示值，如下所示：

@mixin 变换（$property）{
-webkit 转换：$ 属性；
-ms 转换：$ 属性；
变换：$属性；
}

现在，无论何时调用 mixin，我们都可以传入我们喜欢的任何值：

@include 变换（旋转（20度））；

结论

如果你喜欢这篇博文，请关注我 推特 我每天都会在这里发布有关技术相关的事情！

让我们联系

• 文件夹
• 推特
• 领英
• 井号
• 德夫托
• 中等的
• GitHub
• 密码笔

最初发表于 https://dev.to 2022 年 9 月 3 日。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/12512/50500412