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元素上设置背景颜色等于为边框底部定义的相同颜色。

是否有一种优雅的方法？

我想避免再次写 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/documentation/style-rules/parent-selector

Answer 2

您可能对hasManyThrough感兴趣：

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>

当元素中还有另一个类时，SCSS扩展类

2 个答案: