时间戳

首页 > 解决方案 > 如何在不重复具有不同值的语句的情况下简化我的 less 文件？

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

问题描述

少了五个语句，除了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;
    }
  }
}

标签： cssstylesless

解决方案

使用 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;
}

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

推荐阅读