SASS Concatenate class name?

Question

I got a LESS file from this a Date-picker plugin and want to convert it to SASS.

But in the LESS, it concates a class name like this:

//LESS
.dropdown{
    &-inline{
    }
}

Result:

.dropdown-inline ...

I tried many things in SASS like #{-inline} or #{"-inline"} but it doesn't work.

I tried googling and found a year-old article saying it's impossible in SASS. I can't found recent post about this issue. Is it possible now? How?

Thanks

Answer 1

Just moved from css to scss I ran in to this question and was disappointed until I found out it is not up-to-date. Found the correct answer here: https://css-tricks.com/the-sass-ampersand/#article-header-id-12.

It is now possible with the following syntax:

.add-some {
    &-red {
        color: red;
    }
}

Results, as expected, to:

.add-some-red {
    color: red;
}

Answer 2

This is not possible before version 3.2 but will be eventually. Just like LESS, the syntax will use &.

With updated scss, you can now use the interpolation syntax &-- to DRY up your style files.