@mxmwerner

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

У меня есть 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%; } }


Спасибо :)
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Объявить плейсхолдер для размера вне цикла размеров, но внутри цикла медиазапросов

%size1 { width: 23% }

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

.#{ $s - $col }) { @extend $size1; }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы