前回は、Zurb Foundation 6 SassバージョンのCLIインストールとサイト制作までの準備ということで、Foundationを使ったサイト制作開始直前までを解説しました。
ここからは、実際にサイト制作を行う上で、どう行っていけばいいか、特にそのスタイル制作（CSSコーディング）について説明します。
app.scssと_settings.scssの理解を深める
前回、
細かい説明はすっとばして、app.scssの最終行から、ユーザー自身のスタイルを記述していきます。
と書きましたが、ここではその「細かい説明」を行います。
ユーザー自身のスタイル記述はapp.scssの最後に
重複しますが、とても大事なことなのでもう一度いいます。
Foundationが持たないスタイル、つまりそのサイトがもつオリジナルのデザインスタイルを記述するのは、常にapp.scssの最終行以降です。これが原則となるお約束。
Foundationが持つスタイルを変更する時は、_settings.scssを編集する
これが二つ目の大事なお約束です。
例えば、Foundationにはボタンのスタイルがあらかじめ用意されていますが、
<!-- Anchors (links) -->
<a href="about.html" class="button">Learn More</a>
と書けば、下記のように表示されるわけです。
しかし、このボタンの青色が気に入らない、もっと別の色にしたい… せや、黒にしたろ！ という時があると思います。
しかし、こう書くのはFoundation的にはナンセンス。
.button {
background-color: #000;
}
正しくは、_settings.scssを開き、233行目あたり
// 11. Button
// ----------
$button-padding: 0.85em 1em;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
$button-opacity-disabled: 0.25;
がありますので、$button-background: $primary-color;'を$button-background: #000;`に書き換えればOK。
その他の変数も、見ているとなんとなく理解できると思います。
すなわち、Foundationが持っている機能のスタイルを変更したい時は、まず_setting.scssを読み、それっぽい変数があれば、それを書き換えるというのが、Foundation流です。
まとめ
要は、上記のようにすればOK。
では、実現したいスタイルがFoundationのコンポーネントにあるのかどうか、そういったことを調べるにはどうしたらいいのか。次回はその辺を解説したいと思います。