修饰符的简单 Sass BEM 继承

Question

我知道这似乎是一个基本问题，但是尽管有很多关于 sass 和 bem 的伟大著作，但我还是不知道这种继承是如何与嵌套一起工作的。也许这里有人可以澄清。

例如，具有 links 和活动 links 的简单导航：

.Header {
    padding: 1rem;


    &__nav {
        display: flex;
        align-items: center;

        &-link {
            @include fonts.bold;
            font-size: 1.15rem;

            &--active {
                color: red;
            }
        }
    }
}

然后这个组件：

const NavLink = props => (
    <Link
        {...props}
        getProps={({ isCurrent }) => ({
            className: isCurrent ? "Header__nav-link--active" : "Header__nav-link",
        })}
    />
);

const Header = () => {
    return (
        <header className="Header">
            <div className="Header__nav">
                <NavLink to="/app/A">PAGE A</NavLink>
                <NavLink to="/app/B">PAGE B</NavLink>
                <NavLink to="/app/C">PAGE C</NavLink>
            </div>
        </header>
    );
};

问题

未激活的链接 - Header__nav-link 获得字体设置，但 --active link 没有。通过将基础 class 与 active 一起添加到标记来执行此操作的“正确”方法是什么？

像这样：className="Header__nav-link Header__nav-link--active"

Answer 1

是的，正确的方法就是你所描述的。 BEM 中的修饰符旨在与块 class 一起使用，以某种方式从基础改变它。如果您考虑一下，修饰符 class 不能单独存在，因为它没有要修改的定义块。

修饰符的简单 Sass BEM 继承

Simple Sass BEM inheritance for modifiers

sass

bem

问题