时间戳

首页 > 解决方案 > 当元素中还有另一个类时，SCSS 扩展类

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

问题描述

我在css解决navbar.

的navbar定义如下：

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

标签： csssass

解决方案

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

推荐阅读