'@mixin scss with nested elements is possible?

I'm trying to use a mixin to make the code less repetitive, but I can't reach the nested elements.

Could anyone tell me if this approach is possible?

@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));
}

When used directly in css it works perfectly, I know that when scss is compiled to css the code is modified but the result is the same, but when I use the mixin according to the code above, only the background-color property is applied.

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

Solution 1:^[1]

I found that the problem was occurring because I had included the style at the page level, moved the code from the initial Ionic load and everything worked as expected.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Heliomar P. Marques

'@mixin scss with nested elements is possible?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]