FoundationでCSSはどう書いていくのだろうか やっとSassを使ってみる

Foundation Sass イメージ2
,

CSSフレームワークであるFoundationをいじってきましたが、未だCSSを触っていませんでした。Sassを使うためにいろいろ苦労してきたのに、まったくもって本末転倒です。

結論から言うと何も難しいことはありません。いろいろ方法はあるのでしょうが、一番簡単そうな方法でやってみます。

/dist/assets/css/app.css が最初から書き出されていて、ヘッダーにも

<link rel="stylesheet" href="assets/css/app.css">

とあります。

そこで、/src/assets/css/app.cssを上書きしていくことにして、
/src/assets/scssに上書き用の_overwrite.scssを作成します。
ちなみに、partialにしなくても、dist以下に書き出されませんでしたが、Foundationの仕様でしょうか。

その上で、/src/assets/scss/app.scssの最後に@import 'overwrite';を追記します。
/src/assets/scss/_overwrite.scssにCSSを書いてみて、
/dist/assets/css/app.cssの最後に追記されていればOKです。

まとめると

1. _overwrite.scssを作成し、

Foundation Sass イメージ

2. app.scssに@importを追記し、

Foundation Sass イメージ2

3. _overwrite.scssにCSSを書いて、app.cssに書き出されれば問題なしです。

Foundation Sass イメージ3

2. で@importの場所を誤ると、上書きされませんのでご注意ください。