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