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

Question

少了5个语句，除了padding-right的值外，其他都是一样的。有没有办法将其简化为一个语句，而不是重复该语句五次？

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 are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.

示例：

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

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

h1 { 
  item();
  padding-right: 100px;
}

h3 { 
  item();
  padding-right: 75px;
}

h4 { 
  item();
  padding-right: 50px;
}

h5 { 
  item();
  padding-right: 25px;
}

如果你以后想改变一些东西，这将非常有用，因为你只需要修改一个地方的混入。

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

How to simplify my less file without repeating statement with different value?

css

styles

less