Less语言特性 - 混合

2021-07-18  本文已影响0人  张中华

混合类似于编程语言中的函数。 Mixins是一组CSS属性,允许您将一个类的属性用于另一个类,并且包含类名作为其属性。 在LESS中,可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值,并且可以在必要时在代码中重复使用。

例如:

.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}
.p3{
   background : #DAA520;
  .p1;
}

转换后:

.p1 {
  color: red;
}
.p2 {
  background: #64d9c0;
  color: red;
}
.p3 {
  background: #DAA520;
  color: red;
}

扩展语法示例

这里可以跟扩展语法进行一个比较,还是有些类似的。

示例

h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}

转换后:

h2 {
  font-style: italic;
}
.style,
h2 {
  background: green;
}
上一篇 下一篇

猜你喜欢

热点阅读