Можно ли избежать повторения свойств без использования миксинов?

Question

Как можно избежать повторения свойств?.

Я создал миксин с цветом в качестве параметра (это единственное свойство, которое изменяется). Есть ли другой способ рефакторинга без использования миксинов?

td.animal-table__cell {
  &.animalType {
    &.mammal span::before {
      content: ' ';
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background-color: red;
    }

    &.reptile span::before {
      content: ' ';
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background-color: green;
    }

    &.bird span::before {
      content: ' ';
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background-color: purple;
    }

    &.others span::before {
      content: ' ';
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background-color: orange;
    }
  }
}

Answer 1

Перечислите запятыми для группировки общих стилей:

td.animal-table__cell {
    &.animalType {
        &.mammal, &.reptile, &.bird, &.others {
            span::before {
                content: ' ';
                width: 6px;
                height: 6px;
                border-radius: 3px;
            }
        }
        &.mammal span::before {
            background-color: red;
        }
        &.reptile span::before {
            background-color: green;
        }
        &.bird span::before {
            background-color: purple;
        }
        &.others span::before {
            background-color: orange;
        }
    }
}

Вы даже можете избавиться от списка и поместить span::before непосредственно в &.animalType, если знаете, что у вас будут эти стили во вложенном диапазоне независимо от того, что.