Concatenating nested classes using SASS

Question

I am trying to use the nesting feature of SASS to concatenate two classes, but can't figure out how to do it.

This is the HTML:

<section class="a">
    <div class="b">
        <div class="c date">some date</div>
    </div>
</section>

Here is my current SASS:

.a .c
    display: inline-block

    .date
        width: 50px

It creates the following CSS:

.a .c {
    display: inline-block;
}
.a .c .date {
    width: 50px;
}

But this doesn't work. The browser expects the "date" and "string-long" to be nested under the "c" class rather than them being both existent on the same HTML tag.

What I need is this (no space between .c and .date => .c.date):

.a .c {
    display: inline-block;
}
.a .c.date {
    width: 50px;
}

How can I do this?

Answer 1

&

You can achieve this with the ampersand operator. Try:

.a .c
  display: inline-block

  &.date
    width: 50px

The ampersand is a placeholder for parent selectors. And if you don't place a space after it in a nested selector it will output a concatenated selector (just what you want).

DEMO

---

^{Note: in deeper nested selectors & stands for the whole path of nested selectors not just for the immediate parent.}