SCSS Mixin с использованием корневого селектора

В настоящее время я реализую светлый и темный режим в приложении Angular (Angular 11) с использованием SCSS. Я знаю, как настроить темы и применить соответствующие классы к некоторому корневому элементу (app-root для переключения между темами. Я ищу чистый способ стилизовать элемент (например, произвольный div) с цветом фона, который изменяется в зависимости от на светлом и темном режиме.

Итак, у меня есть фон, определенный как

$light-bg-1: white;
$light-bg-2: mat-color($mat-grey, 50);
$light-bg-3: mat-color($mat-grey, 300);

$light-bg-1: mat-color($mat-grey, 900);
$light-bg-2: mat-color($mat-grey, 800);
$light-bg-3: mat-color($mat-grey, 700);

и класс на app-root, который равен либо .app-light-theme, либо .app-dark-theme

Что я хочу делать.


// In global/shared partials
@mixin bg1() { 
  // uses $light-bg-1 or $light-bg-2 for background-color based on
  // which class is applied on the app-root.
}

// In blah.component.scss
#blah-element {
   ...
   @include bg1();
}

Другие способы, которые (я думаю) сработают, но ищут лучшее решение

Не используйте миксин, а просто определяйте классы

.app-light-theme .bg1 { background-color: $light-bg-1; } 
.app-dark-theme .bg1 { background-color: $dark-bg-1; } 

но предпочел бы не делать <div id="blah-element" class="bg1">

Mixin включен вне селектора элемента, который включает селектор элементов

Что-то типа


// In global/shared partials
@mixin bg1($selector) { 
  .app-dark-theme #{$selector} { background-color: $dark-bg-1};
  .app-dark-theme #{$selector} { background-color: $dark-bg-2};
}

// In blah.component.scss
@include bg1(#blah-element);
#blah-element {
   ...
}

Вы можете прочитать это. Вам нужно будет немного изменить селекторы, но в основном это будет делать то, что вы хотите.   —  person tplusk    schedule 23.01.2021

См. также:  Как применить динамический стиль к строкам таблицы PrimeNg?
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. tplusk

    По сути, я искал псевдо-селектор :host-context. Я использовал это в миксине, как определено ниже:

    @mixin bg-0($selector) {
      :host-context(.app-theme-light) #{$selector} { background-color: $light-bg-0; }
      :host-context(.app-theme-dark) #{$selector} { background-color: $dark-bg-0; }
    }
    

    Затем решил использовать родительский селектор & для передачи в качестве параметра миксину:

    #blah-component {
        @include bg-0(&);
    }
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: