如何用Sass编写多类下相同标签的样式代码？

需求说明 #

要为多个不同父类下的<p>标签设置统一样式，对应的普通CSS写法如下：

.vimcash__navbar-links_container p, 
.vimcash__navbar-sign p,
.vimcash__navbar-menu_container p {
    color: #fff;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    text-transform: capitalize;

    margin: 0 1rem;
    cursor: pointer;
}

错误写法问题 #

你尝试的写法是后代嵌套选择器，只会匹配.enterprise__navbar-links_container内部的.enterprise__navbar-menu-container里的<p>，无法实现多个独立父类下的<p>共享样式：

.enterprise__navbar-links_container{
& .enterprise__navbar-menu-container {
        p {
        color: #333333;
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 20px;
        line-height: 23px;
        text-transform: capitalize;

        margin: 0 1rem;
        cursor: pointer;
    }
  }
}

正确的Sass写法 #

写法一：嵌套并列父选择器（最简洁） #

直接把所有父类放在一个选择器组里，嵌套<p>的样式，编译后会自动生成你需要的多逗号分隔CSS：

.vimcash__navbar-links_container,
.vimcash__navbar-sign,
.vimcash__navbar-menu_container {
    p {
        color: #fff;
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 18px;
        line-height: 25px;
        text-transform: capitalize;

        margin: 0 1rem;
        cursor: pointer;
    }
}

写法二：用占位符+@extend（适合样式复用） #

定义一个不会编译成独立CSS的占位符，让多个选择器继承它的样式，适合多处复用同一套样式的场景：

%navbar-p-shared-style {
    color: #fff;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    text-transform: capitalize;

    margin: 0 1rem;
    cursor: pointer;
}

.vimcash__navbar-links_container p,
.vimcash__navbar-sign p,
.vimcash__navbar-menu_container p {
    @extend %navbar-p-shared-style;
}

写法三：用混合宏@mixin（支持参数调整） #

如果需要给不同父类下的<p>微调样式（比如不同颜色），用带参数的混合宏更灵活：

@mixin navbar-p-style($color: #fff) {
    color: $color;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    text-transform: capitalize;

    margin: 0 1rem;
    cursor: pointer;
}

.vimcash__navbar-links_container p {
    @include navbar-p-style();
}
.vimcash__navbar-sign p {
    @include navbar-p-style(#eee); // 可传递参数修改样式
}
.vimcash__navbar-menu_container p {
    @include navbar-p-style();
}

内容的提问来源于stack exchange，提问作者ManP22