Обратный порядок имен классов - PullRequest
Новая
       5

Обратный порядок имен классов

2 голосов
/ 23 мая 2019

У меня есть эта миксин-функция: 

@mixin doSomething() {

    .theme-x & {
        @content;
    }

}

.class-1 {

  color: 000;

 @include doSomething{

   color: ccc;

   &-element {
     color: #fff;
   }
 }; 
}

// Output
.class-1 {
  color: 0;
}
.theme-x .class-1 {
  color: ccc;
}
.theme-x .class-1-element {
  color: #fff;
}

Я хочу, чтобы вместо этого я вывел это: 

.class-1 {
  color: 0;
}
.theme-x.class-1 {
  color: ccc;
}
.theme-x.class-1 .class-1-element {
  color: #fff;
}

Обратите внимание на разницу: класс theme-x находится в том же элементе, что икласс-1.

Возможно ли это?

В реальной жизни у меня есть тематический миксин, который выводит .theme-x для нескольких различных тем, и я хочу иметь возможность создавать дочерние элементы, которые основываются на имени класса родительского элемента вместо темыимя класса ...

1 Ответ

0 голосов
/ 23 мая 2019

Вам нужно инвертировать амперсанд и класс темы в вашем миксине, чтобы создать желаемый селектор для основного элемента. Чтобы создать селектор подэлемента, вы можете присвоить класс основного элемента переменной и использовать его внутри содержимого, передаваемого в ваш миксин.

Вы также можете передать название своей темы в миксин, чтобы сделать ее многократно используемой для различных тем.

См. Пример ниже. Использование переменной немного менее удобно, чем амперсанд, но оно выполняет свою работу. 

@mixin themedWith($theme) {
  $c: & !global;
  &.#{$theme} {
    @content;
  }
}

.class-1 {
  color: blue;

  @include themedWith(theme-x) {
    color: purple;
  
    #{$c}-element {
      color: red;
    }
  }
}

// Output:

.class-1 {
  color: blue;
}
.class-1.theme-x {
  color: purple;
}
.class-1.theme-x .class-1-element {
  color: red;
}

Надеюсь, это поможет.

...