Sass применяет все селекторы к блоку стилей при использовании @extend - PullRequest
Новая
       43

Sass применяет все селекторы к блоку стилей при использовании @extend

0 голосов
/ 03 февраля 2020

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

При генерации кода с помощью al oop и использовании @extend для включения блока стилей Sass генерирует код со всей комбинацией селекторов во всех блоках стилей, а не в ожидаемых блоках стилей , Вот минимальный пример текущего поведения: 

@mixin breakpoint-step($i) {
  $screen-activations: (
    'xs',
    'sm'
  );
  %styling {
    flex: 1 1 calc(#{$i} / 12 - 0.625rem);
  }
  @each $activation in $screen-activations {
    .ss-#{$activation} .span-#{$activation}-#{$i} {
        @extend %styling;
    }
  }
}

@include breakpoint-step(1);
@include breakpoint-step(2);
@include breakpoint-step(3);

Результат: 

.ss-xs .span-xs-1, .ss-sm .span-sm-1, .ss-xs .span-xs-2, .ss-sm .span-sm-2, .ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(1 / 12 - 0.625rem);
}

.ss-xs .span-xs-1, .ss-sm .span-sm-1, .ss-xs .span-xs-2, .ss-sm .span-sm-2, .ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(2 / 12 - 0.625rem);
}

.ss-xs .span-xs-1, .ss-sm .span-sm-1, .ss-xs .span-xs-2, .ss-sm .span-sm-2, .ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(3 / 12 - 0.625rem);
}

Ожидаемый результат: 

.ss-xs .span-xs-1, .ss-sm .span-sm-1 {
  flex: 1 1 calc(1 / 12 - 0.625rem);
}

.ss-xs .span-xs-2, .ss-sm .span-sm-2 {
  flex: 1 1 calc(2 / 12 - 0.625rem);
}

.ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(3 / 12 - 0.625rem);
}

Вот суть SassMeister : https://www.sassmeister.com/gist/d934d9e1a03dd29fe3cb2b504cb7f948

Есть идеи, почему это происходит?

1 Ответ

0 голосов
/ 03 февраля 2020

Я нашел решение этой проблемы, но не ответил, почему это происходит.

Вот обходной путь, к которому я пришел: 

$range: 3;

@for $i from 1 through $range {
    %styling-#{$i} {
        flex: 1 1 calc(#{$i} / 12 - 0.625rem);
    }
}

@mixin breakpoint-step($i) {
  $screen-activations: (
    'xs',
    'sm'
  );
  @each $activation in $screen-activations {
    .ss-#{$activation} .span-#{$activation}-#{$i} {
        @extend %styling-#{$i}; // hack here
    }
  }
}

@for $i from 1 through $range {
  @include breakpoint-step($i);
}

Результат: 

.ss-xs .span-xs-1, .ss-sm .span-sm-1 {
  flex: 1 1 calc(1 / 12 - 0.625rem);
}

.ss-xs .span-xs-2, .ss-sm .span-sm-2 {
  flex: 1 1 calc(2 / 12 - 0.625rem);
}

.ss-xs .span-xs-3, .ss-sm .span-sm-3 {
  flex: 1 1 calc(3 / 12 - 0.625rem);
}
...