sass - SCSS - 表現方法

Question

CSS のネストされたクラス

.wrapper .widecolumn {
    width: 983px;
}

SCSS で次のように表すことができます。

.wrapper {
    .widecolumn {
        width: 983px;
    }
}

しかし、これをどのように表現するのですか?:

.wrapper.widecolumn {
    width: 983px;
}

Answer 1

wrapper.widecolumn {
    width: 983px;
}

大丈夫です（ここではラッパーがタグの例であると仮定します）。ネスティングだけが気になる場合は、次のように & を使用します。

wrapper {
    &.widecolumn {
        width: 983px;
    }
}

& は親オブジェクトを表すため、次のような賢いこともできます

wrapper {
    &.widecolumn {
        width: 983px;
    }
    &:hover {
        color: red;
    }
    body.mycoolclass & {
        font-weight: bold;
    }
}

Answer 2

あなたもできる

.wrapper {
    
  &__widecolumn {
        width: 983px;
    }
  
}

あなたがそれをするとき、あなたは単にこれをそのように使うことができます:

<div class="wrapper__widecolumn">

  <!-- This Column will be 983px -->

  
</div>