如何在不重复不同值的语句的情况下简化我的 less 文件?

Question

少了五个语句，除了右填充的值外，它们都是一样的。 与其重复五次语句，有没有办法将其简化为一个语句？

h1 {
a[href^="http://"], a[href^="https://"] {
&:hover {
background: url(../../resources/icon/external-link-alt.svg) no-repeat
right;
padding-right: 100px;
}
}
}
h3 {
a[href^="http://"], a[href^="https://"] {
&:hover {
background: url(../../resources/icon/external-link-alt.svg) no-repeat
right;
padding-right: 50px;
}
}
}
h4 {
a[href^="http://"], a[href^="https://"] {
&:hover {
background: url(../../resources/icon/external-link-alt.svg) no-repeat
right;
padding-right: 50px;
}
}
}
h5 {
a[href^="http://"], a[href^="https://"] {
&:hover {
background: url(../../resources/icon/external-link-alt.svg) no-repeat
right;
padding-right: 25px;
}
}
}

Answer 1

使用 mixins 重用而不是重复代码行。

Mixins 是一种将一堆属性从一个规则集包含("混合"(到另一个规则集中的方法。

示例：

item {
a[href^="http://"], a[href^="https://"] {
&:hover {
background: 
url(../../resources/icon/external-link-alt.svg)
no-repeat 
right;
}
}
}

我们希望在其他规则集中使用这些属性。好吧，我们只需要放入我们想要属性的类的名称，如下所示：

h1 { 
item();
padding-right: 100px;
}
h3 { 
item();
padding-right: 75px;
}
h4 { 
item();
padding-right: 50px;
}
h5 { 
item();
padding-right: 25px;
}

如果您想将来更改某些内容，这将非常有用，因为您只需要在一个地方😉修改mixin。