So I discovered Zurb Foundation the other day, a well-featured alternative to Bootstrap that is a bit lighter and basically, not Bootstrap!

What is SASS?

Writing a new project, I wanted to use SASS for the CSS generation. If you have never used SASS, but you know what CSS is, SASS allows you to generate CSS by using an additional set of functionality like variables, mixins, nesting of styles and functions. Once you generate the CSS, it is just normal CSS which can be deployed with your site like before.

If you've never used it, you should and you can learn it here. It it very similar to LESS but for reasons I do not understand, SASS is much more popular. 

Foundation

Back to foundation, and like any good modern framework, CSS is generated from SASS (or less) and this is usually to make it super easy both for them to alter things but also for you to customise it. For example, imagine their default button is blue but your brand is green. In most cases, changing a colour in CSS that might be altered for edges, shadow etc. is not a simple find-and-replace but would be very difficult. On the other hand, changing the single @brand-default variable from one colour to another and re-generating the CSS files would be much simpler.

Firstly, there are two formats of SASS and these are in file extensions .sass or .scss. The sass extension is older and uses a non-css style to make the content smaller and "terse" but is not very commonly used any more. .scss is more modern and looks like CSS with extra bits in it so Foundation uses that.

Building SASS into CSS

In general, building SASS into CSS involves using a scripting program, such as gulp or grunt, pointing them at the location of the sass file(s) and then letting it do its job using a pre-built module. In the case of gulp, the code is a few lines long and relatively easy to understand.

One thing to know about the files is that a SASS compiler will attempt to build a CSS file for each SCSS file it finds in the source directory(s) unless the filename starts with an underscore. Files that start with an underscore tell the sass compiler that they are only partial content and will be included by another file. 

Example 1: If your source location had file1.scss, file2.scss and _file3.scss, the sass compiler would produce file1.css and file2.css. Note that the compiler won't know or care whether _file3.scss is actually used anywhere or not.

Example 2: If your source location has main.scss, _file2.scss, _file3.scss, _file4.scss then the compiler will only produce a main.css

In the case of Foundation, there is only a single file, called foundation.scss that does not begin with an underscore. This means you can either point your compiler at the specific file or the entire scss directory, it won't make any difference.

If you don't have anything setup, gulp is a great compiler tool and is based on node modules. There is a guide to setting it up here.

Using SASS Compilation with Foundation

So the problem with foundation is that the documents about building sass are a little poor, especially when you are completely new to the framework. The video doesn't really cover Foundation's use of sass, just sass in general and the documents start talking about a "Foundation project", whatever that is. Most of us will be building it into another project. This is how...

Firstly, you have a number of ways of downloading Foundation, as the installation page describes at zurb. Since gulp is based on node, the NPM package is a good starting point but it doesn't really matter since all of the package managers will give you the same code.

Create yourself a directory that will contain your build script (and node modules) or if you are already using node, you could instead create a gulpfile.js in your root directory (or extend one that is already there) and npm install gulp and gulp-sass.

You will need a project specific _settings file. Do not simply link to the one in the package since that should be allowed to update when the package updates without breaking your own code, although you should copy the one from the package as the basis for your own settings. You need to consider how to manage updates and ensure that you have not accidentally broken your own code generally. You will also need your own "app.scss" or whatever you want to call it. These are not needed directly by the web site so you should put them both into a separate folder somewhere, perhaps called sass (obviously you can move them later if you don't like the choice now).

|- app/
    |- controllers/
    |- node_modules/
    |- sass/
        |- _settings.scss
        |- app.scss
    |- web/
        |- css/
    |- gulpfile.js
    |- package.json

Once you have this basic setup, you will need to edit the _settings.scss and change the import of util, which points to its package relative location by default and change this to use the full path to the package util directory (relative to the scss file you are compiling) e.g. 

from

@import 'util/util';

to

@import '../node_modules/foundation-sites/scss/util/util';

Since Foundation doesn't include settings by default (to allow you to do it) you then need to populate
your own app.scss to include both the settings FIRST and then the foundation file. Something like this:

@import 'settings';
@import '../node_modules/foundation-sites/scss/foundation';


But the important thing to realise is that by default, you will not get any css! This is deliberate. Since each component in Foundation defines mixins as well as content and you might want access to mixins without having to generate all the content. The import part gives you access to everything but you will only get CSS for what you INCLUDE into your scss file AFTER your @import declarations. You can get the full list of items to include from the sass docs page. You might not know what they all are right now but it's up to you how much you include now and how much to try and bring in other stuff later.

Obviously your sass compiler in gulp (or whatever) can put the output CSS wherever it wants, I put mine directly into the web/css directory for use by the site. You can also set various sass options like compression to minify it for production. It is up to you whether you want to use the watch function to automatically rebuild the CSS any time you change your settings or app.scss and also whether you want to use browserlink, which allows the browser to be reloaded automatically after changes, something that cab be useful for rapid testing of CSS changes.

Configuring the grids

Although you won't necessarily need to change colours and stuff right now, you should consider which parts of the grid to include and what to set flexbox to. Flexbox is a nice new feature in HTML but it is not supported in really old browsers. Depending on whether you care, you should leave it enabled or disable it with the $global-flexbox variable in _settings. You can also disable $xy-grid, which is the preferred new grid, if you do not want to support flexbox by default and need to rely on the legacy Float Grid.