Sass .scss：ネストと複数のクラス？

Question

現在のプロジェクトでSass（.scss）を使用しています。

例を次に示します。これは素晴らしい作品

HTML

<div class="container desc"> 
    <div class="hello"> 
     Hello World 
    </div> 
</div> 

SCSS

.container { 
    background:red; 
    color:white; 

    .hello { 
     padding-left:50px; 
    } 
} 

。

ネストされたスタイルを使用して複数のクラスを処理できますか。サンプルで

私はこのことについて話している上：この場合

CSS

.container.desc { 
    background:blue; 
} 

すべてdiv.containerが通常redだろうけどdiv.container.descが青になります。

containerはどのようにしてSassに入れられますか？ご例えば

：あなたはparent selector reference&を使用することができます

Answer 1

、それはコンパイル後の親セレクタによって置き換えられます

.container { 
    background:red; 
    &.desc{ 
     background:blue; 
    } 
} 

/* compiles to: */ 
.container { 
    background: red; 
} 
.container.desc { 
    background: blue; 
} 

あなたの親セレクタがネストされているので、もし&が完全に解決されますそれ自体を置換する前にネストは解決されます。&

.element{ 
    &:hover{ ... } 
    &:nth-child(1){ ... } 
} 

しかし、あなたは*^{が好き&で、事実上の任意の位置に配置することができますので、次も可能です：：}

この表記は、ほとんどの場合、pseudo-elements and -classesを書き込むために使用され

.container { 
    background:red; 
    #id &{ 
     background:blue; 
    } 
} 

/* compiles to: */ 
.container { 
    background: red; 
} 
#id .container { 
    background: blue; 
} 

しかし、これはどういうわけか入れ子構造を壊して、スタイルシートの特定のルールを見つける手間を増やすことに注意してください。

*：&の前に空白以外の文字は使用できません。したがって、selector + & - #id&の直接連結を実行するとエラーが発生します。

Answer 2

これが当てはまる場合は、クラス名またはクラス名の規則を作成するより良い方法を使用する必要があると思います。例えば、.containerクラスを特定の用途や外観に応じて異なる色にしたいと言ったように。

SCSS

.container { 
    background: red; 

    &--desc { 
    background: blue; 
    } 

    // or you can do a more specific name 
    &--blue { 
    background: blue; 
    } 

    &--red { 
    background: red; 
    } 
} 

CSS

.container { 
    background: red; 
} 

.container--desc { 
    background: blue; 
} 

.container--blue { 
    background: blue; 
} 

.container--red { 
    background: red; 
} 

上記のコードは、クラスの命名規則にBEM方法論に基づいています：あなたはこれを行うことができます。このリンクを確認することができます：BEM — Block Element Modifier Methodology