Edoardoo Edoardoo - 5 months ago 15
CSS Question

Double ampersand selector in SASS

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

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/