Имена динамических классов в SCSS на :: before и :: after

Question

Я пытаюсь создать динамические классы для моей веб-страницы, но не могу заставить ее работать.

Я пытаюсь сделать так, чтобы :: before и :: after 'Цвета s будут меняться в зависимости от класса, назначенного родительскому классу 'picture'.

Я выделил в своем коде SCSS ниже, какие строки должны быть динамическими.

.picture {
      display: inline-block;
      height: 130px;
      width: 130px;
      margin-bottom: 50px;
      z-index: 1;
      position: relative;
      &:before {
        content: "";
        width: 100%;
        height: 0;
        border-radius: 50%;
        background-color: #1369ce; //COLOUR HAS TO BE DYNAMIC
        position: absolute;
        bottom: 135%;
        right: 0;
        left: 0;
        opacity: 0.9;
        transform: scale(3);
        transition: all 0.3s linear 0s;
      }
      &:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #1369ce; //COLOUR HAS TO BE DYNAMIC
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
}

Дляцвета в :: before и :: after будут динамическими.

Answer 1

:: before и :: after 'цвета будут меняться в зависимости от класса, назначенного родительскому классу' picture '.

Полагаю, ваши классы и цвета уже будут определены, цвета динамические, но не бесконечные или неопределенные.

В вашем коде Sass определите классы, как показано ниже

.some-dynamic-class{
  .picture{
    &:before,
    &:after{
      background-color:#some-color;
    }
  }
}

А затем в вашем Angular-коде реализуйте логику динамического класса, предпочтительно с помощью ввода;

@Input() dynamicClass:string;

А затем в вашем шаблоне используйте ngClass для родительского элемента

<parent-element [ngClass]="dynamicClass">
    <div class="picture">
    </div>
</parent-element>

EDIT: Тогда в вашем случае, из вашего комментария, код sass должен быть таким:

$rankColors: trainee #00AA00, traineebuild #00AA00, mod #55FF55, builder #55FF55, srmod #FFFF55, architect #FFFF55, developer #FFAA00, admin #FF5555, manager #AA0000;
@each $i in $rankColors {
  .#{nth($i, 1)} {
    .picture{
      &:before,
      &:after{
        background-color:nth($i, 2);
      }
    }
  }
}