I had wanted to use the Zurb Foundation framework to build a Shopify theme for a while, but the major hurdle was getting it to work with SASS.
Sub folders cannot be created within a Shopify theme's asset folder, making it difficult to support all of the SCSS partials needed to use Foundation.
This Shopify CSS Import guide makes it extremely easy: https://github.com/Shopify/shopify-css-import
I setup my local folder structure using the CSS Import guide. I then moved all of the Foundation SCSS files into a single css/ folder within my theme's root folder. Along with a theme.scss.liquid file.
The theme.scss.liquid file looked like this (before I removed what I didn't need):
For it to output a valid file, all partial imports should be removed from the SCSS files as well as @include exports
I then run gulp watch
to compile all of the SCSS files into a single SCSS file called theme.scss.liquid which resides in my theme's asset folder. In a separate terminal window I was running theme watch
to push the changes to my Shopify store.
You can now develop your theme locally with all the Foundation SCSS components intact!