如何在 CSS 预处理器 Less 中使用 Mixins

发布网友发布时间：2022-04-06 12:41

共1个回答

热心网友时间：2022-04-06 14:11

　　在 Less 中，我们可以定义一种叫 “mixins” 的东西 —— 和编程语言中的函数有一点的相似。
在 Less 中，它被用来灵活的组件化 CSS 中可重复使用的 class。 Mixin 允许你把一个 class 的所有属性嵌入到另外的一个 class 中 —— 就像它的一个属性一样，仅仅通过简单的 include class 的名字。它仅仅是一个变量，但是拥有一个 class 的属性。任何的 CSS class 和 id 规则都可以混在里面。
　　.round-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu {
color: gray;
.round-borders;
}
// 输出
.round-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#menu {
color: gray;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}