扩展scss文件中的多个类

Question

我在我的项目中使用AdminLte，在html页面中有：

<aside class="main-sidebar sidebar-dark-primary elevation-4">
<aside>

一切都很好。

我创建了一个自定义scss文件以支持多个租户，导入了scss文件，然后创建了以下样式：

@import '_adminlte/node_modules/bootstrap/scss/bootstrap';
@import '_adminlte/build/scss/adminlte.raw';

.tenant-sidebar {
     @extend .main-sidebar, .sidebar-dark-primary, .elevation-4
}

因此，我将我的aside标记更改为：

<aside class="tenant-sidebar">
<aside>

但是，这样做只适用于main-sidebar和elevation-4类。不应用sidebar-dark-primary类。

为什么会发生这种事？

Answer 1

TLDR：

.sidebar-dark-primary类在adminlte.css中为空

正如我所看到的，sidebar-dark-primary类在生成的css文件中没有任何样式。它的唯一目的是像下面这样包装子元素样式：

.sidebar-dark-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active

因此，当您@extend这个类时，不会有任何相关的样式。

Answer 2

根据SASS Docs on @extend的说法

.tenant-sidebar {
     @extend .main-sidebar, .sidebar-dark-primary, .elevation-4
}

基本上意味着扩展这个选择器：.main-sidebar.sidebar-dark-primary.elevation-4

我想试一试：

.tenant-sidebar {
     @extend .main-sidebar;
     @extend .sidebar-dark-primary;
     @extend .elevation-4;
}