Лучший способ использовать родительский селектор SASS

Question

Просто хотел знать, есть ли лучший способ написать следующий CSS в scss, используя родительский селектор

.tabs--boxs .blue-color-box .box-title:after {
    border-bottom-color: #1a4b84;
}

.tabs--boxs .green-color-box .box-title:after {
    border-bottom-color: #1e8334
}

.tabs--boxs .orange-color-box .box-title:after {
    border-bottom-color: #fe5722
}

.tabs--boxs .purple-color-box .box-title:after {
    border-bottom-color: #5926a6
}

Answer 1

Создайте список переменных colors и затем повторите его, используя @each ( Demo ):

$colors : (
  'blue'  : #1a4b84,
  'green' : #d9534f,
  'orange': #c9302c
);

@each $color_name, $color in $colors {
  .tabs--boxs{
    .#{$color_name}-color-box{
      .box-title{
        &::after { border-bottom-color: $color }
      }
    }
  }
}

Answer 2

Я считаю, что на самом деле нет лучшего способа сделать это.

Вы могли бы структурировать это немного по-другому:

    .tabs--boxs {
        .blue-color-box .box-title:after {
            border-bottom-color: #1a4b84;
        }

        .green-color-box .box-title:after {
            border-bottom-color: #1e8334
        }

        .orange-color-box .box-title:after {
            border-bottom-color: #fe5722
        }

        .purple-color-box .box-title:after {
            border-bottom-color: #5926a6
        }
    }

Но на самом деле, это не так уж плохо. Это может показаться повторяющимся, но это все уникальные селекторы, которые требуют уникальных правил CSS. Теперь, если вы хотите добавить CSS, который применяется ко всем этим, я бы просто добавил еще один селектор .box-title:after без класса цветного прямоугольника перед ними, но внутри селектора tabs--boxs.