Sass: как правильно скомпилировать результат цикла @each?

Question

[mxmwerner]

У меня есть sass код:

$sizes: s m
$cols: 3 4
$bpoints: 320 800

@each $size, $cols, $bpoint in zip($sizes, $cols, $bpoints)
    @media ( min-width:  #{ $bpoint }px )
        @for $col from 1 through $cols
            @each $s in $sizes
                @if index($sizes, $s) <= index($sizes, $size)
                    @if $col <= index($sizes, $s) + 1
                        .#{ $s - $col })
                            width: ((100% / $cols ) * $col) - 2%

который компилируются в css:

@media (min-width: 320px) {
  .s-1 {
    width: 31.33333%; }
  .s-2 {
    width: 64.66667%; }
  .s-3 {
    width: 98%; } }

@media (min-width: 800px) {
  .s-1 {
    width: 23%; }
  .m-1 {
    width: 23%; }
  .s-2 {
    width: 48%; }
  .m-2 {
    width: 48%; }
  .s-3 {
    width: 73%; }
  .m-3 {
    width: 73%; }
  .m-4 {
    width: 98%; } }

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

@media (min-width: 320px) {
  .s-1 {
    width: 31.33333%; }
  .s-2 {
    width: 64.66667%; }
  .s-3 {
    width: 98%; } }

@media (min-width: 800px) {
  .s-1 .m-1 {
    width: 23%; }
  .s-2 .m-2 {
    width: 48%; }
  .s-3 .m-3 {
    width: 73%; }
  .m-4 {
    width: 98%; } }

Спасибо :)

Comments

[posters]

На какой-то велосипед похоже

Answer 1

[Сергей delphinpro]

Объявить плейсхолдер для размера вне цикла размеров, но внутри цикла медиазапросов

%size1 { width: 23% }

потом в цикле размеров наследовать его

.#{ $s - $col }) { @extend $size1; }

Comments

[mxmwerner]

Спасибо за ответ!
Если я вас правильно понял, то код должен принять такой вид:

@each $size, $cols, $bpoint in zip($sizes, $cols, $bpoints)
    @media ( min-width:  #{ $bpoint }px )
        @for $col from 1 through $cols

            %width
                width: ((100% / $cols ) * $col) - 2%

            @each $s in $sizes
                @if index($sizes, $s) <= index($sizes, $size)
                    @if $col <= index($sizes, $s) + 1
                        .#{ $s - $col }
                            
                            @extend %width

Однако, я получаю:

Compilation Error
Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.

Помогите понять, где я ошибся?

[Сергей delphinpro]

С виду вроде правильно.
внутри media нельзя применять extend ко внешним селекторам. но тут он внутри находится.

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

spoiler

@for $col from 1 through $cols

            %width
                width: ((100% / $cols ) * $col) - 2%

            @each $s in $sizes
                @if index($sizes, $s) <= index($sizes, $size)
                    @if $col <= index($sizes, $s) + 1
                        .#{ $s - $col }
                            
                            @extend %width

[mxmwerner]

В результате сработал этот вариант:

@each $size, $cols, $bpoint in zip($sizes, $cols, $bpoints)
    @media ( min-width:  #{ $bpoint }px )
        @for $col from 1 through $cols

            .#{ $size - $col }
                width: ((100% / $cols ) * $col) - 2%

            @each $s in $sizes
                @if index($sizes, $s) < index($sizes, $size)
                    @if $col <= index($sizes, $s) + 1
                        .#{ $s - $col }

                            @extend .#{ $size - $col }

При каждой итерации цикла медиазапросов нужно было объявлять уникальный класс (или плейсхолдер) для расширения, а не переопределять старый. Спасибо, что подтолкнули в нужном направлении :)