CODEWITHSUNDEEP
csssass
Edoardoo
Edoardoo

Reputation: 2909

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.

Upvotes: 14

Views: 11727

Answers (2)

Kurt
Kurt

Reputation: 509

I know this question is a bit old, but i just want to show another working solution for this.

This example:

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

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

will result in:

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

Upvotes: 39

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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/

Upvotes: 12

Related Questions