Sassってみよう!〜ネスト編〜

Sassネスト編

前回はインストールからコンパイルまでをご紹介しましたが、
今回から数回に分けてSassの基本的な使い方を簡単にご紹介しようと思います。(私自身、Sassの基本的な機能しか使えませんww)

まずは、コメントの書き方から。
コメントの書き方はcssと同じく「/* コメント */」で囲みます。
その他に、一行コメントは「//」が使えます。
※「//」コメントはコンパイル後のcssには書き出されません。
またアウトプットスタイルが「compressed」の場合はコメントが削除されますが、「/*! コメント */」で囲むことによってcompressedでもコメントを書き出すことが出来ます。

ネストの使い方

それでは早速、Sassの一番簡単な機能である「ネスト」からいきましょう。
ご存知のとおり「ネスト」は入れ子のことですね。
htmlで入れ子に記述するのは当たり前ですが、
Sassでも同じような感覚で記述する事が出来ます。

上記spanタグを装飾する場合、
cssなら以下のように記述することがあると思います。

body article p span {
  font-color: red;
  font-weight: bold;
}

これをSassで書くと以下のように書くことが出来ます。

body {
  article {
    p {
      span {
        font-color: red;
        font-weight: bold;
      }
    }
  }
}

htmlと同じような構造になっていますね。

ネストで書くと逆に行数が増えていますが、
(もちろんコンパイルすれば、上記cssのように出力されます。)
ネストで書くメリットは次の点にあると思います。

まず、入れ子状態で書かれているので、構造が分かりやすい点。

そして上記の例で言うと、liをスタイリングしたい場合など、
下記のように書き足すだけでスタイリングできる点です。

body {
  article {
    p {
      span {
        font-color: red;
        font-weight: bold;
      }
    }
    ul {
      list-style-type: none;
      li {
        display: inline-block;
      }
    }
  }
}

またhtml側で「article」を「div」に変更しても
上記例ではSassを一箇所書き換えるだけで、簡単に修正対応できます。

その他のネスト機能

子セレクタや隣接セレクタを使う場合

body {
  article {
    > p {
      span {
        font-color: red;
        font-weight: bold;
      }	
      + ul {
        list-style-type: none;
      }
    }
  }
}

cssにコンパイル後 ↓

body article > p span {
  font-color: red;
  font-weight: bold;
}
body article > p + ul {
  list-style-type: none;
}

擬似クラスなどを使う場合

&(アンパサンド)を使用します。
&は親セレクタを参照してくれます。

a {
  color: #333;
  &:hover {
    color: red;
  }
}
div {
  &#container {
  margin: 0 auto;
  }
}

cssにコンパイル後 ↓

a {color: #333;}
a:hover {color: red;}
div#container {margin: 0 auto;}

プロパティのネスト

p {
  border: 1px solid #333 {
    top: 0;
  }
}

cssにコンパイル後 ↓

p {
  border: 1px solid #333;
  border-top: 0;
}

メディアクエリで使う場合

ネストで書いてもきちんと別にコンパイルしてくれます。
特定箇所にメディアクエリを使いたいときなどに便利です。

.container {
  width: 980px;
  @media all and (max-width:768px) {
    width: 100%;
  }
}

cssにコンパイル後 ↓

.container {
  width: 980px;
}
@media all and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

いくら便利だからと言って
ただ無闇にネストを多用し過ぎると逆にメンテナンス性が悪くなりますし、
優先度的にも複雑になってしまうので、計画的に使用したいところです。
(楽ちんなのでついつい乱発してしまいがちなのですが…)

【第1回】インストール編 【第2回】コンパイル編 【第3回】ネスト編 【第4回】変数編 【第5回】@extend編 【第6回】@mixin編 【第7回】@import編 【第8回】@for@while編 【第9回】@each @if @function編

SNSでもご購読できます。