variables - "$root: &" 在 sass 中是什么意思？

Question

我正在尝试了解 Splide 的 sass 文件（https://splidejs.com/）。

在许多文件中都有这样的代码

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

什么$root: &;手段？

标签： variablessass

Answer 1

在您的代码段中，$root只是变量的名称。
你可以给它另一个名字，比如$foo.

$root: &在这里等价于$root: .splideas &in sass 指代父选择器。

代表着：

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

相当于：

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

并将编译为：

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