Scss — Как правильно написать условие?

Question

[Марти Макфлай]

Всем привет!
Пытался адекватно переписать на scss вот такой код:

Код 1

.text_size_s {
    .text__word_width_s {
        width: 20px;
    }

    .text__word_width_m {
        width: 48px;
    }

    .text__word_width_l {
        width: 100px;
    }
}

.text_size_m {
    .text__word_width_s {
        width: 24px;
    }

    .text__word_width_m {
        width: 56px;
    }

    .text__word_width_l {
        width: 114px;
    }
}

.text_size_l {
    .text__word_width_s {
        width: 28px;
    }

    .text__word_width_m {
        width: 68px;
    }

    .text__word_width_l {
        width: 138px;
    }
}

.text_size_xl {
    .text__word_width_s {
        width: 32px;
    }

    .text__word_width_m {
        width: 74px;
    }

    .text__word_width_l {
        width: 154px;
    }
}

.text_size_xxl {
    .text__word_width_s {
        width: 36px;
    }

    .text__word_width_m {
        width: 88px;
    }

    .text__word_width_l {
        width: 184px;
    }
}

Думал сработает вот так, но ругается, что Undefined variable: "$text-size".

Код 2

@each $text_sizes in s, m, l, xl, xxl {
    @if $text_sizes == s {
        $text_size: (
                s:20px,
                m:48px,
                l:100px
        );
    } @else if $text_sizes == m {
        $text_size: (
                s:24px,
                m:56px,
                l:114px
        );
    } @else if $text_sizes == l {
        $text_size: (
                s:28px,
                m:68px,
                l:138px
        );
    } @else if $text_sizes == xl {
        $text_size: (
                s:32px,
                m:74px,
                l:154px
        );
    } @else if $text_sizes == xxl{
        $text-size: (
                s:36px,
                m:88px,
                l:184px
        );
    }
    .text_size_#{$text_sizes} {
        @each $word_width_size, $word_width in $text-size {
            .text__word_width_#{$word_width_size} {
                width: $word_width;
            }
        }
    }
}

Также пробовал вот так, но как оказалось Sass не могёт такую конкатенацию $text_size_#{$text_sizes}

spoiler

$text_size_s: (
        s:20px,
        m:48px,
        l:100px
);
$text_size_m: (
        s:24px,
        m:56px,
        l:114px
);
$text_size_l: (
        s:28px,
        m:68px,
        l:138px
);
$text_size_xl: (
        s:32px,
        m:74px,
        l:154px
);
$text_size_xxl: (
        s:36px,
        m:88px,
        l:184px
);
@each $text_sizes in s, m, l, xl, xxl {
    .text_size_#{$text_sizes} {
        @each $word_width_size, $word_width in $text_size_#{$text_sizes} {
            .text__word_width_#{$word_width_size} {
                width: $word_width;
            }
        }
    }
}

Вложенных массивов же Sass не знает? В доке не нашёл.

Проект учебный, хотелось бы знать, как лучше такое реализовать.

Заранее спасибо всем!

Answer 1

[Сергей delphinpro]

Вложенных массивов же Sass не знает? В доке не нашёл.

Массивов вообще нет. Никаких.
Есть списки и есть карты.
И те, и другие могут быть вложенными.

$text_sizes: (
    s:   ( s:20px, m:48px, l:100px ),
    m:   ( s:24px, m:56px, l:114px ),
    l:   ( s:28px, m:68px, l:138px ),
    xl:  ( s:32px, m:74px, l:154px ),
    xxl: ( s:36px, m:88px, l:184px ),
);

@each $size, $def in $text_sizes {
    .text_size_#{$size} {
        @each $word_size, $word_width in $def {
            .text__word_width_#{$word_size} {
                width: $word_width;
            }
        }
    }
}

Comments

[Марти Макфлай]

Большое вам спасибо! Вот почему мои гугл запросы приводили меня к ничему :) Буду знать и использовать!