CODEWITHSUNDEEP
csssass
Giox
Giox

Reputation: 5123

SCSS extend class when there is also another class in the element

I have difficulties in solving a css issue on the navbar.

The navbar is defined like the following:

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

each a element has its own colour, defined like the following:

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

What I want to do and I can't understand how is to set on the a.active element the background-color equal to the same colour defined for border-bottom.

Is there an elegant way to do this?

I'd like to avoid to write again a.planning.active{background...}

Upvotes: 1

Views: 183

Answers (2)

connexo
connexo

Reputation: 56720

Use SASS' parent selector &:

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

which is compiled to

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

a.management.active {
  color: red;
}

Example: https://www.sassmeister.com/gist/89de3850f21109652cd175ce8085da95

https://sass-lang.com/documentation/style-rules/parent-selector

Upvotes: 2

3rdthemagical
3rdthemagical

Reputation: 5350

You may be interested in css custom properties:

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>

But if need 100% browser support you can use solution by @connexo.

Another sulution with :after element as border-bottom:

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

Demo:

.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>

Upvotes: 1

Related Questions