【HTML5/CSS3】【ツール/エディタ】【Foundation】Sass版FoundationをWindowsで使えるようにする | Wood-Roots:blog

これまでCSSフレームワークというものをほとんど使ったことがなかったのですが、そろそろ手を出そうかと思いFoundationというCSSフレームワークを使ってみました。

html、css、jsファイルで構成される静的バージョンもありますが、色・幅・余白などが緻密に計算されて構成されているFoundationではあまり使い勝手がいいとは言えません。
たとえば制作中にブロック間の余白をもっと狭くしたいと思っても、ブロック間の余白はブロック幅や内部のpaddingなどあちこちに影響を及ぼします。

せっかくCSSフレームワークを使うのですから、SassバージョンのFoundationを使いましょう。
何かを変更してもすべてその変更された値を元にCSSが再構築されますので、仕様変更にも柔軟に対応でき、メンテナンス性も高いです。

というわけで、Sass版Foundationを使ってサイト制作ができるようになるまでの手順をまとめました。
なお、Windows環境でSassのコンパイルにはGruntを使うという前提です。

下準備

Git、Node.js、Rubyのインストール

Chocolatyを使うのが簡単です。Chocolatyを未インストールの方はコマンドプロンプトを管理者権限で開き、以下のコマンドをペーストしてください。

Chocolatyのインストールが終わったら、以下のコマンドでGit,Node.js,Rubyがまとめてインストールできます。

bower、gruntのインストール

bowerとgruntをインストールします。
ちなみに「npm」はNode.jsのコマンドです。

Foundationのインストール

Foundationの管理プログラムをインストールします。
管理プログラムと言っても、.scssファイルやGruntfile.jsなどをダウンロードして展開するだけのプログラムのようです。

ここまでの手順はこれまでFoundationによるサイト構築をやったことがない方のみが必要となります。
2案件目以降は、以降の手順だけでセットアップが可能です。

Foundationを使えるようにする

新規プロジェクトの作成

以下のコマンドをコマンドプロンプトに入力します。

カレントフォルダ内に「projectName」というフォルダが作成され、その中にFoundationに必要なファイルが展開されます。名称は何でもかまいません。

上記コマンドの実行が完了すると、カレントフォルダ内に必要ファイル一式がダウンロードされます。
制作作業はそのフォルダ内のファイルを編集して進めていきます。

gruntで監視を開始する

プロジェクトフォルダに移動し、gruntコマンドで監視を開始します。

これで.scssファイルを修正すると自動的に.cssにコンパイルされます。

このままではSassのコンパイルだけなのですが、Gruntfile.jsを修正することで　Sassコンパイル→FTPアップロード→Live Reload　のような使い方も可能です。

どのファイルに手を入れればいいのか

プロジェクトフォルダを見ると大量のファイルやフォルダがあって難しそうに感じてしまうのですが、手を入れるべきファイルは数個だけです。

HTML

index.html
基本となるレイアウトが見本がてら入力されていますので、HTMLを見ながら自分好みのレイアウトをつくっていくといいでしょう。

ただ静的HTMLでサイトを作成するケースも減ってきていると思いますので、現実的にはindex.htmlを元にWordPressのテーマをつくったりPHPにして使ったりすることになるでしょう。

SCSS

scss/_settings.scss
このファイルはFoundationの基本となるフォーマットを定義しているファイルです。
文字サイズや余白、色などの基本情報はこの_settings.scss内に変数で定義されています。

たとえば、配色を変更したい場合は120行目あたり

という記述がありますので、コメントアウトを外して色を定義します。
Sassなので基本色を変更すればborder-colorや文字の色など、影響がある部分はすべていい感じに変更されます。
あちこちを修正しなくていいのでとても便利ですね。

追加のスタイルを定義したい場合

scssフォルダ内のapp.scssに追記してもいいのですが、別ファイルで定義したい場合は以下のように「@import」という記述をapp.scssに追記します。

@importはCSSの@importと同じく別ファイルを取り込む処理です。

Gruntfile.jsの中身を見ると分かりますが、デフォルトではSassコンパイルの対象はapp.scssのみとなっています。
なのでapp.scss内で完結するようにしないといけません。

余談：CSSフレームワークを使ってみた感想

便利だし手っ取り早いし事故（レイアウト崩れ）も起きないしいいのですが、外観を制御するためのクラスを大量に付加し、過剰なdivだらけのHTMLを書くのはちょっと抵抗が…。このへんは理想（美しいHTMLを書く）と現実（仕事をとっとと終わらせる）のトレードオフと言ったところでしょうか。