Editing Foundation with Sass (section)

== Compiling Sass ==

=== Foundation 6 ===

Foundation 6 uses `gulp` to compile. 

Creating a new Foundation project creates a gulpfile.js in the project directory. The default action is to watch for changes in `.scss` and `.js` files, so simply running `gulp` will spawn a process that will compile the project.

The gulp task for compiling Sass is named `sass`, so from the foundation project's root directory:

<syntaxhighlight lang="sh">
$ gulp sass
</syntaxhighlight>

==== Configuring a file watcher in PhpStorm/PyCharm ====

'''Project Settings''' > '''Tools''' > '''File Watchers''' > '''SCSS'''
* '''File Type:''' SCSS
* '''Scope:''' Project Files
* '''Program:''' `[/path/to/gulp]` e.g. `/usr/local/bin/gulp`
* '''Arguments:''' sass ''(name of gulp task to run, from `gulpfile.js`)''
* '''Working Directory:''' $FileDir$
* '''Environment variables:''' ''n/a''
* '''Output paths to refresh:''' $FileNameWithoutExtension$.css ''(Not sure if this is correct)''

==== Compiling Compass ====

I couldn't figure out a way to use `config.rb` to use the `compass compile` command with the Foundation for Sites 6 libraries. It's necessary to use the `gulp` task.

These [https://github.com/Igosuki/compass-mixins Compass mixins] emulate the compass mixins. Download them and place the `lib` directory in the project's `scss/` directory. Then e.g. include with `@include "compass-mixins\compass\animation";`

=== Foundation 5 ===

Foundation 5 offers a collection of Sass files that they suggest customizing. <ref>[http://foundation.zurb.com/sites/docs/v/5.5.3/using-sass.html How to Use Foundation Sass] Foundation documentation (version 5)</ref>

* Variables controlling appearance are located in `_settings.scss`
* The documentation recommends placing custom styles in `app.scss`
* Foundation components can be included or excluded by commenting them out in `app.scss`

Question: how well does this arrangement accommodate upgrades? Do these two files get overwritten in the course of an upgrade? How to preserve changes?