What does "$root: &" mean in sass?

Question

I'm trying to understand sass files of Splide ( https://splidejs.com/ ).

In many files there are codes like this one

.splide {
    $root: &;

    &--ttb {
        > #{$root}__pagination {
            display:        flex;
            right:          1em;
            bottom:         50%;
            left:           auto;
            flex-direction: column;
            transform:      translate(0, 50%);

            #{$root}__pagination__page {
                width:  $indicator-height;
                height: $indicator-width;
            }
        }
    }
}

What the $root: &; means?

Answer 1

In your snippet, $root is just the name of the variable.
You could give it another name, like $foo.

$root: & is equivalent here to $root: .splide as & in sass refers to the parent selector.

It means that:

.splide {
    $root: &;

    &--ttb {
        > #{$root}__pagination {
            display:        flex;
            right:          1em;
            bottom:         50%;
            left:           auto;
            flex-direction: column;
            transform:      translate(0, 50%);

            #{$root}__pagination__page {
                width:  $indicator-height;
                height: $indicator-width;
            }
        }
    }
}

Is equivalent to:

.splide {
    &--ttb {
        > .splide__pagination {
            display:        flex;
            right:          1em;
            bottom:         50%;
            left:           auto;
            flex-direction: column;
            transform:      translate(0, 50%);

            .splide__pagination__page {
                width:  $indicator-height;
                height: $indicator-width;
            }
        }
    }
}

And will compile to:

.splide--ttb > .splide__pagination {}
.splide--ttb > .splide__pagination .splide__pagination__page {}