Foundation with Sass: Difference between revisions
No edit summary |
|||
| Line 33: | Line 33: | ||
== Compiling Sass == | == Compiling Sass == | ||
=== Foundation 6 === | |||
Foundation 6 uses `gulp` to compile. | Foundation 6 uses `gulp` to compile. | ||
| Line 38: | Line 40: | ||
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. | 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. | ||
=== Compiling Compass === | ==== 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. | 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";` | 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? | |||
== Prerequisites == | == Prerequisites == | ||
Revision as of 18:15, 4 February 2016
CDN
CDNs for stubbing out projects.
//cdn.foundation5.zurb.com/foundation.css//cdn.foundation5.zurb.com/foundation.js
or
//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css
Installing Foundation with Sass
$ npm install --global foundation-cli
Creating a new project
$ foundation new --framework sites --template basic --directory [app_name]
Upgrading from earlier versions
First uninstall the existing Foundation installation
$ npm uninstall foundation
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.
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 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. [1]
- 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?
Prerequisites
- Git
- Node.js
- Ruby 1.9+
Links
Reference
- Getting Started with Foundation and Sass - Foundation Documentation
Notes
- ↑ How to Use Foundation Sass Foundation documentation (version 5)