Editing Foundation with Sass (section)

=== 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";`