Really, all you need to get started with Foundation scss is a program to compile the scss files. Ideally your IDE would do this, but most IDE’s don’t have that capability just yet, so you will need to download a separate app for it. I recommend Scout , because you can specify an output directory and it doesn’t hog the CPU, but I also like Koala….Koala is dead simple and made especially for designers, but it compiles the scss in the same directory, which I don’t like, because after all…who wants their scss and css files living in the same directory. I used to like Prepros, but it’s gotten CPU intensive, and all the cool features are “paid” features now. All three have additional features in that they will also process and minify your js and css…and Prepros even goes so far as to offer stitching, which is a really nice feature where it automatically stitches together your css and js files into a single file…something very handy for optimizing your website in production. This can get you in trouble in js since there are usually some dependencies and not everyone has mastered closures, modules and lazy loading and often, the load order matters, but definitely give it a shot and then check to make sure everything still works.
There’s a composer file for keeping track of dependencies, but for the most part you don’t really need it..if you are doing everything command line, and used to using composer, then feel free to use it to download any dependencies, and if you are feeling bold, run update to get the latest versions of the dependencies and see if everything still works. Otherwise, unzip the files, and you can just copy the /scss and /js directories from the unzipped zip file. Feel free to delete any js application files that you aren’t going to use (and their corresponding scss files…also edit the /scss/foundation.scss file to remove references to those files), and in fact I highly encourage this to keep your website optimized for speed. The only files you absolutely need are the /scss/foundation.scss, /scss/_settings.scss, foundation.js and the modernizr.js files. The js files should go wherever you normally put your js files, but the scss directory can go just about anywhere. Ideally put them in your IDE’s project directory, but not in the deployment directory. They can be deployed, but they won’t be used because these are the files that get compiled into the css. So you’ve moved your scss files to some particular directory, and copied the js files that you want to your js directory. Now when you fire up your SCSS (SASS) compiler and “Add New Project” and specify your project directory. A warning if you are using PrePros….it can be VERY slow when it initially scans your project before it’s ready to go.
For the most part these directions should work for Mac or Linux as long as you find a SASS compiler for your OS.
And there you have it, a barebones Foundation scss deployment with all the magic and wonder that SASS brings to Zurb’s Foundation, without the fluff. My next article will be on using the Foundation _settings.scss file and customizing your SASS to accommodate your website’s particular dimensions.