SASS中的双和号选择器

Question

我正在尝试将组件从较少端口移植到sass.我有这个配置少:

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

Answer 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/