Sassの便利機能:入れ子(ネスト)について

Sassの便利な機能、入れ子について紹介したいと思います。ちなみに入れ子のことを英語でネストと言い、実際にSassでもそう呼ばれることがあります。入れ子は、Sassを使うのであれば絶対使うものです。

入れ子(ネスト)の基本

入れ子とは、簡単に言うと今まで一つの{  }で完結していたものを、{  }の中に{  }を書いてCSSで値を指定していくものです。早速コードを見てみましょう。

HTMLコード

CSS

SCSSに変換した後

毎回#main-contents ...と書かなくてよくなったので、記述量が減り、見た目もわかりやすくなりました。何度も親要素や要素までのルートを書かなくていいので、とても楽です。また、HTMLの構造と同じような見た目になるので、視覚的にCSSを判断することができます。 ちなみにネストには、改行やインデントのルールもありません。

メディアクエリでも便利なネスト

レスポンシブにもよく使われるメディアクエリはCSSだと記述が離れてしまい見つけるのも大変でした。ネストを使えば、とてもわかりやすくメディアクエリをつけることができます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集