@mixin带有嵌套元素的 scss 是可能的吗？

问：

我正在尝试使用 mixin 来减少代码的重复性，但我无法访问嵌套元素。

谁能告诉我这种方法是否可行？

@mixin schema-calendar($backgroundColor: var(--ion-color-primary), $titleColor: var(--ion-color-secondary)) {
  background-color: $backgroundColor !important;

  .switch-btn,  
  ion-icon {
    color: $titleColor !important;
    text-transform: uppercase;
  }
  .week-toolbar li {
    color: $titleColor !important;
    font-weight: 900;
  }
  button.today p { color: $titleColor !important; }
  button.on-selected {
    p { color: var(--ion-color-secondary-contrast) !important;}
  }
}

ion-calendar.schemaDefault {
  @include schema-calendar();
}

ion-calendar.schemaBlackRed {
  @include schema-calendar(var(--ion-card-black-red));
}

ion-calendar.schemaIndigo {
  @include schema-calendar(var(--ion-card-indigo), var(--ion-color-light));
}

当直接在 css 中使用时，它运行良好，我知道当 scss 编译为 css 时，代码被修改但结果是一样的，但是当我根据上面的代码使用 mixin 时，只应用了 background-color 属性。

ion-calendar.schemaBlackRed {
  // primaryColor: 'var(--ion-card-blackred)', secondaryColor: 'var(--ion-color-secondary)', titleColor: 'var(--ion-color-secondary)',
  background-color: var(--ion-card-black-red) !important;

  .switch-btn,  
  ion-icon {
    color: var(--ion-color-secondary) !important;
    text-transform: uppercase;
  }
  .week-toolbar li {
    color: var(--ion-color-secondary) !important;
    font-weight: 900;
  }
  button.today p { color: var(--ion-color-secondary) !important; }
  button.on-selected {
    p { color: var(--ion-color-secondary-contrast) !important;}
  }
}