More than 5 years have passed since last update.

scssの&

Last updated at 2016-01-05Posted at 2016-01-04

http://www.sassmeister.com/
で試し書きをしてみるとよい。

SCSS

#hoge {
  &.foo {
    height: 300px;
  }
  
  .foo {
    height: 200px;
  }
}

↓
CSS

#hoge.foo {
  height: 300px;
}

#hoge .foo {
  height: 200px;
}

説明

SCSSの入れ子はHTMLの入れ子を意味するが、&を使った場合はHTMLの入れ子を意味しない。

#hoge.fooは
<div id="hoge" class="foo">
のことであり、idがhogeかつclassがfooのものという意味だ。

#hoge .fooは

<div id="hoge">
  <div class="foo">

の入れ子を表す。

SCSS


.hoge-label{
  &.pen {
    color: red;
  }
  
  &.pencil {
    color: black;
  }
}

CSS

.hoge-label.pen {
  color: red;
}

.hoge-label.pencil {
  color: black;
}

HTML

<div class="hoge-label pen">
  aaa
</div>
<div class="hoge-label pencil">
  bbb
</div>

なるほど &（アンパサンド）はほんとにかつの意味だ。
class="hoge-label"かつclass="pen"。

HTML側はclass="hoge-label pen"とスペース区切りなのはやむなし....