sass - SASS を使用してネストされたクラスを連結する

Question

SASS のネスト機能を使用して 2 つのクラスを連結しようとしていますが、その方法がわかりません。

これはHTMLです：

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

これが私の現在のSASSです：

.a .c
    display: inline-block

    .date
        width: 50px

次の CSS を作成します。

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

しかし、これはうまくいきません。ブラウザーは、"date" と "string-long" が同じ HTML タグに存在するのではなく、"c" クラスの下にネストされていることを想定しています。

私が必要とするのはこれです（.c と .date => .c.date の間にスペースはありません）：

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

これどうやってするの？