如何在不重复使用不同值的语句的情况下简化我的更少文件？

Question

少了五条语句，除了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

使用mixin来重复使用而不重复代码行。

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😉。