Как упростить мой файл less без повторения утверждения с другим значением? - PullRequest
Новая
       42

Как упростить мой файл less без повторения утверждения с другим значением?

0 голосов
/ 28 мая 2020

На пять операторов меньше, и все они такие же, за исключением значения 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;
    }
  }
}

1 Ответ

0 голосов
/ 28 мая 2020

Используйте миксины, чтобы повторно использовать, а не повторять строку кода.

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

Это очень полезно, если вы хотите что-то изменить в будущем, поскольку вам нужно только изменять миксины в одном месте ?.

...