Double ampersand selector in SASS

Question

I'm trying to port a component from less to sass. I have this configuration in less:

.datepicker {

    &&-rtl {
             ...

    }
}

which of course is giving me an error in compiling with SASS.

What I would like to have is this css:

.datepicker {

}
.datepicker.datepicker-rtl {

}

I have 3.3.3 version of SASS.

Is there any good alternative to this syntax? I've looked ad the documentation but couldn't find a solution.

Thank you so much.

Answer 1

A simple solution is just repeating the datepicker class

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

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

otherwise you may assign a variable with the class name, like so

$dp : datepicker;

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

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

You can test this syntax here: http://sassmeister.com/