FoundationでCSSはどう書いていくのだろうか やっとSassを使ってみる
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を作成し、
2. app.scssに@importを追記し、
3. _overwrite.scssにCSSを書いて、app.cssに書き出されれば問題なしです。
2. で@importの場所を誤ると、上書きされませんのでご注意ください。