Scss - How to write a condition correctly?

Question

Sass

Hello!
I tried to adequately rewrite the following code in scss:

Code 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;
    }
}

I thought it would work like this, but it swears that Undefined variable: "$text-size".

Code 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;
            }
        }
    }
}

I also tried like this, but as it turned out, Sass cannot concatenate $text_size_#{$text_sizes} like this

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 doesn't know nested arrays, does it? I didn't find it in the dock.
The project is educational, I would like to know how best to implement this.
Thanks in advance everyone!

Answer 1

Sass doesn't know nested arrays, does it? I didn't find it in the dock.

There are no arrays at all. None.
There are lists and there are maps.
Both of them can be nested.

$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;
            }
        }
    }
}