My new site is finally live and there was certaining a bit of a learning curve on getting used to sass and foundation. I’ve never used foundation before but decided to use it instead of bootstrap. I have never been someone who turned down a good challenge and it was one especially with customizations. Foundation 6 is fairly new so I had to rely heavily on its documentation since there was not a lot of information on it beyond the official site.
I stumbled upon a nifty tutorial for getting started with the foundation & jekyll combo on the Penguin Dreams site. The site also included the Jekyll Foundation repo on github. I found it very useful to getting started but ending up in a bit of a bind with my _global.scss and _main.scss.
I reached out to one of my favorite slack channels for answers as to why my customizations were being overrided by _global.scss. In the process, I learned a lot more about how sass worked as two people reached out to me to try to resolve my issue. It turned out that I was giving the foundation.scss file which @import ‘global’ too much control so whenever I used ‘jekyll serve’ it would default to global settings. I learned a lot from this problem and I was thrilled to have support from LWC ladies who helped walk me through some things I didn’t know about sass imports and includes.