SASS. Компиляция. От чего зависит результат?

Question

[Алексей]

Пример кода:

.gallery {
	@include flex (space-between, center, null, row);
	position: relative;

	%gallery__man-flex {
		@include flex (center, center, wrap);
	}

	&__man {
		@extend %gallery__man-flex;
		width: 60vw;
		margin: 0 auto;
		padding-left: 10px;
		padding-right: 10px;
	}

	&__man-wrapper {
		@extend %gallery__man-flex;
		margin: 0;
	}
}

Результат компиляции содержит в общих свойствах класс родителя (.gallery .gallery__man, .gallery .gallery__man-wrapper), а в персональных свойствах класса родителя (.gallery) нету

.gallery {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative; }
  .gallery .gallery__man, .gallery .gallery__man-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
  .gallery__man {
    width: 60vw;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px; }
  .gallery__man-wrapper {
    margin: 0; }

Почему так и от чего это зависит?

Answer 1

[Flying]

У вас placeholder %gallery__man-flex определён внутри .gallery, таким образом все места где будет использоваться этот placeholder будут наследовать контекст его определения.

В остальных случаях запись вида &__man означает "расширение текущего селектора", поэтому очевидно добавления контекстного селектора не происходит. Если он нужен - то стоит использовать & &__man

Comments

[Алексей]

Спасибо. Разобрался. Вынес (%gallery__man-flex) за пределы (.gallery) и при компиляции родитель не добавился. То чего и хотел добиться

[Сергей delphinpro]

Алексей, я по памяти не помню как оно сработает в данном случае.
Но можно попробовать

.gallery {
  @include flex (space-between, center, null, row);
  position: relative;

  @at-root {
    %gallery__man-flex {
      @include flex (center, center, wrap);
    }
  }

  &__man {
    @extend %gallery__man-flex;