css - SASS 中的双符号选择器

Question

我正在尝试将一个组件从 less 移植到 sass。我在 less 中有这个配置:

.datepicker {

    &&-rtl {
             ...

    }
}

在使用 SASS 进行编译时，这当然会给我一个错误。

我想要的是这个 css:

.datepicker {

}
.datepicker.datepicker-rtl {

}

我有 3.3.3 版的 SASS。

这个语法有什么好的替代方法吗？我查看了文档，但找不到解决方案。

非常感谢。

Answer 1

我知道这个问题有点老了，但我只想展示另一个可行的解决方案。

这个例子:

.datepicker {
    /* your properties here, e.g. */
    width: 100%;

    &#{&}-rtl {
        /* your properties here, e.g. */
        width: 200%;
    }
}

将导致:

.datepicker {
    /* your properties here, e.g. */
    width: 100%;
}    
.datepicker.datepicker-rtl {
    /* your properties here, e.g. */
    width: 200%;
}