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/

SASS中的双和号选择器

2 个答案: