SCSS чувствительный к предку селектор

Question

Кажется, что-то должно быть выполнимо, но я нигде не могу найти ответ.

Можно ли с помощью SCSS указать вариант стиля элемента на основе его нахождения в определенном предке?

Пример:

Что я хочу в CSS:

.parent1 .element,
.parent2 .element {
    /* style for .element in both parents */
}
.parent1 .element {
    /* special style for .element only when in parent1 */
}

Что бы я хотел сделать в SCSS:

.parent1,
.parent2 {
    .element {
        /* style for .element in both parents */

        [SOME SCSS MAGIC] {
            /* special style for .element only when in parent1 */        
        }
    }
}

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

Answer 1

Я бы советовал против этого ... ... но вы можете использовать nth в списках селекторов - как:

* делает стиль менее читабельным

SCSS

.parent1,
.parent2 {
    .element {
        /* all items in selector list */

        @at-root #{nth(&, 1)} {
          /* first item in selector list */
        }
        @at-root #{nth(&, 2)} {
          /* second item in selector list */
        }
    }
}

Вывод CSS

.parent1 .element,
.parent2 .element {
  /* all items in selector list */
}

.parent1 .element {
  /* first item in selector list */
}

.parent2 .element {
  /* second item in selector list */
}

Обновление

Чтобы сделать его немного более читабельным, вы можете создать вспомогательный микс, например:

@mixin selector-contains($substring) {
    @each $part in & {
        @if str-index($part+'', $substring) { 
            @at-root #{$part}{ @content; } 
        }  
    }
}

.parent1,
.parent2 {
    .element {
        @include selector-contains('.parent1'){
            /* first item in selector list */
        }
        @include selector-contains('.parent2'){
            /* second item in selector list */
        }
        @include selector-contains('.parent'){
            /* all elements */
        }
    }
}

Answer 2

Вы можете использовать директиву @at-root:

Редактировать: удалено & и заменено на .element после указания ошибки.

.parent1,
.parent2
{
    .element 
    {
        /* styles for .element in both parents */
        @at-root .parent1 .element
        {
            /* styles for .element only when in parent1 */        
        }
    }
}

Answer 3

использовать @ основной элемент .parent1 .element

  .parent1,
    .parent2 {
        .element {
            /* style for .element in both parents */
              background: yellow;
              color: green;
            @at-root body .parent1 .element {
              color: red;
                /* special style for .element only when in parent1 */
            }
        }
    }

Answer 4

.parent1,
.parent2 {
    .element {
        /* common styles */
    }
}

.parent1 .element {
    /* parent 1 element overrides */
}

, который компилируется в:

.parent1 .element,
.parent2 .element {
  /* common styles */
}

.parent1 .element {
  /* parent 1 element overrides */
}

Редактировать

Или используйте миксин для размещения общих стилей

@mixin commonStyles {
  /* Common to both parent1 & parent 2 */
}

.parent1 {
  .element {
    @include commonStyles;
  }
}

.parent2 {
    .element {
    @include commonStyles;

    /* parent 2 specific styles */
  }
}

Который компилируется в:

.parent1 .element {
  /* Common to both parent1 & parent 2 */
}

.parent2 .element {
  /* Common to both parent1 & parent 2 */
  /* parent 2 specific styles */
}

Редактировать 2

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

@mixin baseStyles {
  /* Common to both parent1 & parent 2 */
}

@mixin modifiedStyles {
  /* parent 2 specific styles */
}

.parent1,
.parent2 {
  .element {
    @include baseStyles;
  }
}

.parent2 {
    .element {
      @include modifiedStyles;
  }
}