今回はレスポンシブwebデザインについて、SCSSを使用した記述方法をまとめてみたいと思います。

SCSSを使用することのメリット

SCSSを利用するメリットは、冗長となりがちな記述を複数ファイルに切り出すことで、コードを簡略化できる点です。

レスポンシブ化の記述方法は複数あり、多くの場合はCSSライブラリを使用します。
ライブラリを使用することのメリットは開発のスピードが上がること、コードの簡略化などが挙げられますが、一方でデザインに幅を持たせることができないというデメリットもあります。

反対にライブラリを使用しない場合はデザインに幅を持たせることができる一方、記述量が多くなり、コードが見辛くなるといったデメリットがあります。

SCSSでは外部ファイルの読み込みが行えるため、ブレークポイントごとにファイルを作成し、それぞれのファイルをメインのSCSSファイルで読み込むことでこのデメリットを解消できます。

下準備

stylesディレクトリを作成して、この中にbreakpointsディレクトリとstyle.scssファイルを作成します。
breakpointsディレクトリ内に設定したいブレークポイント用のファイルを用意します。
今回は共通部分の記述を行う_base.scssと、
_600px.scss、_960px.scss、1280px.scssの4つを作成します。

ちなみに
SCSSでは別ファイル内で読み込ませるファイルにはファイル名の先頭に_をつけます。これはファイルをコンパイルする際に_がついているファイルをコンパイラーが部品と解釈してくれることで、ファイル読み込みのパフォーマンスが上がるためです。

読み込み

準備したbreakpointsのそれぞれのファイルをstyle.scssで読み込みます。
SCSSで別ファイルを参照する場合は@import 'ファイルのパス';と記述することで参照ができます。このとき参照ファイル名に.scssをつける必要はありません。

@import'breakpoints/base';@media(min-width:600px){@import'breakpoints/600px';}@media(min-width:960px){@import'breakpoints/960px';}@media(min-width:1280px){@import'breakpoints/1280px';}

上記を記述することで

• 共通するスタイリングを_base.scss
• 画面幅600px ~ 959pxのスタイリングを_600px.scss
• 960px ~ 1279pxのスタイリングを_960px.scss
• 1280px以上のスタイリングを_1280px.scss

に記述を切り出すことができます。
また、_base.scss以外のファイルは@media関数を使用して、min-widthを指定することで、指定した条件でのみファイルを読み込んでくれます。

あとはbreakpointsディレクトリ内の各ファイルにスタイリングを行い、コンパイルを行えばコンパイラーによって統合されたcssファイルが生成されます。

画面幅ごとにファイルを分けることで保守管理もし易くなります。
SCSSでは他にも変数を定義できたり、for文を使用できたりと、便利な機能が多々あります。
是非一度使用してみてはいかがでしょうか。