SASS 中的双 & 号选择器答案

【问题标题】：Double ampersand selector in SASSSASS 中的双 & 号选择器
【发布时间】：2016-07-07 02:53:48
【问题描述】：

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

.datepicker {

    &&-rtl {
             ...

    }
}

这当然是在用 SASS 编译时给我一个错误。

我想要的是这个css：

.datepicker {

}
.datepicker.datepicker-rtl {

}

我有 3.3.3 版本的 SASS。

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

非常感谢。

【问题讨论】：

为了争论，除了.datepicker之外，还有没有其他类有.datepicker-rtl？如果没有，那么您不需要额外的特异性，您可以放心地使用&-rtl

标签： css sass

【解决方案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%;
}

【讨论】：

毫无疑问的最佳解决方案！

【解决方案2】：

一个简单的解决方案就是重复 datepicker 类

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

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

否则你可以用类名分配一个变量，像这样

$dp : datepicker;

.#{$dp} {
    /* your properties here, e.g. */
    width: 100%;

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

您可以在此处测试此语法：http://sassmeister.com/

【讨论】：

适用于我的项目，这是一个非常聪明的解决方案。无论如何，我认为双 & 号选择器非常有用。非常感谢。
在今天的 sass 版本中，您还可以使用 &.&-rtl 选择器。