MEGUMI

はじめてのSass!WebデザイナーのためのSass導入方法まとめ

Web業界ってどんどん新しい知識がアップデートされていくのでついていくのが大変ですよね。

HTMLとCSSを覚えた後、どうやらHTMLの記述を簡略化してくれる「Pug」と呼ばれるテンプレートエンジンがあるらしくて、CSSは「Sass」というメタ言語を使えば、もっと効率的にコーディングができる?って

「もうええわ!!!」

となっていませんか?

実際に僕はなりました。いや、今でもそう思っております、はい。

というわけで、今回は半年くらい前の自分に向けて、習得した知識を頭の中で整理する意味も込めて「Sass」の導入方法と簡単な機能についてご紹介したいと思います。

 

Sassってなに?

Sass

Sassとは簡単に言うと、パワーアップしたCSSのことです。
正確にはメタ言語と呼ばれますが、要は「CSSに対して機能を拡張した言語」ということになります。

Sassの略がSassy CSS(カッコいいCSS)ということからもわかりますね。

Sassを使うことで、今まで書いていたCSSの記述よりもずっと簡単に、明確に記述することが可能になります。
後々どんなことができるのか見ていくとして、まずはSassを使うための準備に取り掛かりましょう!

 

 

Sassを使う準備をしよう

今回はSassの利用環境を構築するためNode.jsとタスクランナーのgulpを使用します。

① Node.jsのインストール

Node.jsとはJavaScriptで作られたサーバーサイド環境のことです。
JavaScriptは通常、ブラウザ側で動作するプログラミング言語ですが、サーバー側でも同じように動作したら楽だよね。ってことで開発されたのがNode.js。

Sassを利用するためにはNode.jsをインストールすることによって使えるnpmコマンドが必要になるので、

早速下記サイトからダウンロードしましょう!

node.jsの公式サイト

公式サイト:https://nodejs.org/ja/

今回は安定版である左側のLTSをダウンロードします。

インストーラを実行したら、指示に従ってダウンロードしてください。
(基本的には「次へ」を進めていけばOKです)

 

② プロジェクトフォルダの作成

Node.jsがインストールできたら、Sassを使用するフォルダを作成しましょう。
名前は何でも構いません。今回は「test-project」というフォルダをデスクトップに作成します。

それができたら、今度はコマンドラインから作成したフォルダにアクセスします。
WindowsはコマンドプロンプトMacはターミナルというアプリケーションを開いてください。

ターミナル.appまでの階層

開いたらコマンドラインに「cd」と入力し、半角スペースを空けた後、フォルダをドラッグ&ドロップしましょう。

コマンドラインにドラッグ&ドロップ

表示が切り替わったら、そのままEnterキーでOKです。これでプロジェクトフォルダへ移動することができました。

さて、ここまでできたら先ほどちょこっと触れたnpmコマンドを実行します。
以下のコマンドを間違えないように入力して、実行してください。

するとフォルダ内にpackage.jsonファイルが生成されました。

npmとは

パッケージ管理ツールのこと。npmコマンドを使うことで、様々なJavaScriptのパッケージをインストールしたりアップデートしたりできるようになる。(MacでいうApp Storeのようなものを思い浮かべてもらうとわかりやすいです。)

 

③ gulpのインストール

gulp本体をプロジェクトフォルダーにインストールします。

これでnode_modulesフォルダが生成されました。
また、package.jsonに「devDependencies」の項目とパッケージ名:バージョンが追記されたと思います。

package.jsonにはこのように、プロジェクト毎に必要なパッケージ名とバージョンが記述されることによって、npmが勝手に必要な(依存している)パッケージをインストールしてくれます。

npm installでnode_modulesフォルダが生成され、この中にnpmを利用してインストールされたパッケージが格納される仕組みです。

gulpとは

タスクランナーのこと。Web制作における様々な処理(タスク)を自動化してくれるツールで、SassをCSSに変換してくれたり、画像やjsファイルを圧縮してくれたりする。めちゃ便利。

 

④ タスクの作成

SassファイルをCSSファイルに変換してくれるプラグイン「gulp-sass」もインストールしましょう

これで、package.jsonの「devDependencies」にgulp-sassが新たに追加されました。

 

タスクを作成するにはプロジェクトフォルダ直下にgulpfile.jsというファイルを作成する必要があります。
gulpfile.jsという名前のファイルを作り、以下のコードをコピペしてください。

これでSassを使う準備は完了です!

 

 

Sassを使ってみよう

無事に環境の準備も整ったので、いよいよ実際にSassを使ってみましょう。
プロジェクトフォルダ直下にsassフォルダを、その中にstyle.scssを作成します。

sassフォルダ

style.scssには下記のコードを記述してみましょう。

 

タスクを実行してSassをコンパイル

gulpfile.jsにはSassをコンパイルするのに必要なタスクは設定してあるので、下記コマンドでタスクを実行します。

するとcssフォルダにコンパイルされたcssファイルが書き出されました。

以上でgulpを使ったSassのコンパイルが完了です!

 

タスクを自動ウォッチ化しよう

Sassを更新する度に、いちいちgulp sassとコマンドを打つのは面倒ですよね。
gulpのWatch機能を使うと、Sassファイルを監視し、更新(保存)する度に自動でコンパイルしてくれます。

下記コマンドを実行してみましょう。

これで、ファイルは常に監視状態となり、保存する度にSassがコンパイルされます。
監視を止めたいときは「Ctrl + C 」を押すと停止します。

(Watch機能の正体はgulpfile.jsに記述された次のコードです)

 

 

Sassの便利機能3選

Sassを実際に使えるようになったので、具体的にSassの便利な機能を3つに絞ってご紹介したいと思います。
これを知ったら今までのCSSコーディングには戻れなくなること間違いなしです!

ルールのネスト

ネストの記述方法を知る前に、まずはスタイルを適用するHTMLファイルを作成しましょう。

 

.container内の各要素にスタイルを適用したい場合、今までのCSSコーディングでは「.container section」など毎回同じセレクタをコピー&ペーストして変更していた方もいると思います。

しかし、Sassのネストを使えばコピー&ペーストをする必要がなく、階層構造も把握しやすくなります。

 

&(アンパサンド)

&で親のセレクタを参照することができます。

&.prev、&.nextと記述された部分はコンパイルされると、li.prev、&li.nextとなります。

また、擬似クラスにも適用できるので大変便利です。

 

ミックスイン(@mixin)

Sassの中で最も強力な機能がミックスインです。

ミックスインを簡単に説明すると、スタイルの集まりをあらかじめ定義しておき、それを他の場所で呼び出して使うという機能です。

言葉ではわかりづらいので実際に使い方を見てみましょう。

先に各パーツに共通するスタイルを「@mixin ミックスイン名」で定義します。
そして次のようにそれらのパーツに「@include ミックスイン名;」で呼び出し展開します。

すると#homeArea01、#homeArea02の両方にあらかじめ定義しておいたスタイルが適用されました。

 

ミックスインを使えば、CSSでよく使う「clearfix(クリアフィックス)」も簡単に記述することができます。

このようにclearfix用のミックスインを用意しておき、clearfixを使いたいセレクタに対して@includeで呼び出します。

 

 

また、レスポンシブWebデザインで使うメディアクエリ(Media Queries)もミックスインを応用すれば楽々コーディングができます。

使用したいセレクタに対して次のように書きます。

これを使いこなせばCSSコーディングの時と比べ物にならないくらい記述量が減り、ソースの見通しがとてもよくなります!
ただ、気軽に使える反面、ルールセット内で頻繁に使い過ぎてしまい、コンパイル後のコード量が多くなってしまう問題もあります。バランスを考えて計画的に使えるようにしましょう。

 

 

まとめ

いかがでしたでしょうか?

Sassはめちゃくちゃ便利なのでぜひ今回の記事を参考に積極的に使いこなして、今までの業務が効率化できれば幸いです!

「もっと色々な機能を使いこなしたい!」という方は下記の書籍に詳しく書かれているのでぜひ一度購入してみてください。

Web制作者のためのSassの教科書 改定2版 Webデザインの現場で必須のCSSプリプロセッサ

ではでは、よきSassライフを〜(o´・ω・`o)ノシ