Sassの基本的な使い方

Sassとは、CSSを拡張したメタ言語のことを言います。簡単に言うとCSSをより一層、便利に効率よく書けるようにした言語です。Sassには様々な機能が用意されていますので、基本的な機能をいくつか見ていきたいと思います。

ネストの使い方

Sassの中でもよく使用される機能の1つがネストです。これは、HTMLの構造に照らし合わせてCSSの設定を入れ子にして記述していく方法です。例えば、以下のようなHTMLソースがあるとします。

<div id="contents">
  <div class="main">
    <p>テキスト</p>
  </div>
</div>

Sassのネストを使って記述するには以下のようになります。

#contents {
  .main {
    width: 600px;
    margin-bottom: 30px;
    p {
      font-size: 120%;
    }
  }
}

これをCSSにコンパイルすると以下のようになります。

#contents .main {
  width: 600px;
  margin-bottom: 30px;
}
#contents .main p {
  font-size: 120%;
}

普段、CSSを書いている見慣れた感じになります。このようにSassのネストを利用することで、本来CSSで記述しているようなセレクタを親要素から辿って毎回記述したりコピペしたりする必要がなくなります。これにより、記述する量も軽減することができたり、どこかセレクタを変更したりする場合もCSSではそれに関連している箇所を1つずつ書き換えるところが、Sassでは1か所変更するだけで済み、メンテナンスの面でも有効になったりします。

また、Sassの場合、メディアクエリもネストをすることができます。その場合は以下のように記述します。

#contents {
  .main {
    width: 600px;
    margin-bottom: 30px;
    @media screen and (min-width:480px) {
      margin-bottom: 15px;
    }
  }
}

これをコンパイルすると以下のようなCSSが生成されます。

#contents .main {
  width: 600px;
  margin-bottom: 30px;
}
@media screen and (min-width:480px) {
  #contents .main {
    margin-bottom: 15px;
  }
}

コメントの使い方

Sassでコメントを使用する場合は、通常CSSで使用している「/*～*/」の形式でコメントをすることができます。その他には、Javascript等で使われる「//～」の1行コメントも使うことができます。

#contents {
  /*margin-bottom: 30px;*/
}
#contents .left {
  //margin-bottom: 30px;
  float: left;
}

これをコンパイルすると通常のCSSで使用している形式のコメントアウトはそのままコメントアウトされた状態で生成されますが、1行コメント形式の場合は、コンパイル後はコメントアウトされた箇所は削除されて生成されます。