コラム

こんにちは、ここです。

CSSを拡張して書きやすさ、見やすさをより高めたスタイルシート「Sass（サス、サース）」。「Syntactically Awesome StyleSheet」の略の通り非常に「文法的に素晴らしいスタイルシート」です。従来のCSSにおける不満点の多くが解消される為、導入しているWebサイト・サービスも少なくありません。
今回はSassの書き方の中でも、「SCSS」における「アンパサンド（＆）」の使い方について解説していきます。

SASSについての詳細はこちらをご覧ください。
作業効率・メンテナンス性を高める「Sass」とは？

基本的なscssの使い方

コンパイル前のscss

    .block {
      &.foo {
          background-color : #fff;
      }
  
      &__bar {
          background-color: #000;
      }
  
      &:hover {
          text-decoration: underline;
      }
    }
  

コンパイル後のcss

    .block.foo {
      background-color: #fff;
    }
    
    .block__bar {
      background-color: #000;
    }
    
    .block:hover {
      text-decoration: underline;
    }
  

「.block」の後ろに＆の後ろの文字列が追記されます。

＆の応用

コンパイル前のscss

    .block {
      & + & {
          margin-top: 1em;
      }

      &,
      &--foo {
          margin-top: 1em;
      }
    }
  

コンパイル後のcss

    .block + .block {
      margin-top: 1em;
    }
    
    .block, .block--foo {
      margin-left: 1em;
    }
  

cssにおける「＋」や「,」等も同様に使用することができます

特定の親要素の応用

コンパイル前のscss

    .block {
      $amp: &; // 親要素を変数に定義

      &__foo {
          color: #333;

          #{$amp} & { // 親要素を変数で呼び出し
              color: #fff;
          }

          #{$amp}-bar & { // 親要素を変数+class名変化で呼び出し
              color: #000;
          }
      }
    }
  

コンパイル後のcss

    .block__foo {
      color: #333;
    }
    
    .block .block__foo {
      color: #fff;
    }
    
    .block-bar .block__foo {
      color: #000;
    }
  

親要素のclass名が変化しました。
「$(任意の文字):&;」で変数に定義づけることができます。

最後に

以上、アンパサンド（＆）を用いたScssの応用でした。
少しでもお役にたてば幸いです。