SCSS расширяет класс, когда в элементе также есть другой класс

Question

У меня трудности с решением проблемы css на панели навигации.

Панель навигации определяется следующим образом:

<nav class="navbar">
    <a class="navbar-phase planning active" href="#">Planning</a>
    <a class="navbar-phase collection" href="#">Data Collection</a>
    <a class="navbar-phase management" href="#">Data Management</a>
    <a class="navbar-phase analysis" href="#">Data Analysis</a>
    <a class="navbar-phase reporting" href="#">Reporting</a>
    <a class="navbar-phase dissemination" href="#">Dissemination</a>
</nav>

каждый элемент имеет свой собственный цвет, определенный следующим образом:

a.planning {
    border-bottom: 5px solid $color__dark-green;
}

a.collection {
    border-bottom: 5px solid $color__orange;
}

a.management {
    border-bottom: 5px solid $color__ochre;
}

a.analysis {
    border-bottom: 5px solid $color__yellow;
}

a.reporting {
    border-bottom: 5px solid $color__lime;
}

a.dissemination {
    border-bottom: 5px solid $color__aqua;
}

Что я хочу сделать, и я не могу понять, как установить для элемента a.active цвет фона, равный цвету, определенному для border-bottom.

Есть ли элегантный способ сделать это?

Я бы хотел избежать повторной записи a.planning.active {background ...}

Answer 1

Использовать родительский селектор SASS &:

$color__red: red;
a.management {
  border-bottom: 5px solid $color__red;
  &.active {
    color: $color__red;
  }
}

, который скомпилирован в

a.management {
  border-bottom: 5px solid red;
}

a.management.active {
  color: red;
}

Пример: https://www.sassmeister.com/gist/89de3850f21109652cd175ce8085da95

https://sass -lang.com / документация / правила стиля / родительский селектор

Answer 2

Вас могут заинтересовать Пользовательские свойства CSS :

a.planning {
  --color: red; /* define variable */
  border-bottom: 5px solid var(--color);
}

a.collection {
  --color: green;
  border-bottom: 5px solid var(--color);
}

a.management {
  --color: blue;
  border-bottom: 5px solid var(--color);
}

.active {
  /* use variable for each active elements */
  background-color: var(--color);
}

<nav class="navbar">
    <a class="navbar-phase planning active" href="#">Planning</a>
    <a class="navbar-phase collection" href="#">Data Collection</a>
    <a class="navbar-phase management active" href="#">Data Management</a>
</nav>

Но если вам нужна 100% поддержка браузера, вы можете использовать решение с помощью @ connexo.

Еще одно решение с элементом :after в качестве границы-дна:

Scss:

.navbar-phase {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    width: 100%;
    z-index: -1;
  }

  &.active:after {
    height: 100%;
  }

  &.planning:after {
    background: red;
  }

  &.collection:after {
    background: green;
  }

  &.management:after {
    background: blue;
  }
}

Демонстрация:

.navbar-phase {
  position: relative;
}
.navbar-phase:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  z-index: -1;
}
.navbar-phase.active:after {
  height: 100%;
}
.navbar-phase.planning:after {
  background: red;
}
.navbar-phase.collection:after {
  background: green;
}
.navbar-phase.management:after {
  background: blue;
}

<nav class="navbar">
    <a class="navbar-phase planning active" href="#">Planning</a>
    <a class="navbar-phase collection" href="#">Data Collection</a>
    <a class="navbar-phase management active" href="#">Data Management</a>
</nav>