Create a new Angular CLI project with the SASS style option:ng new my-foundation-app --style=sass
cd my-foundation-app
Installation
Install the SASS version of the Foundation for Sites project with:npm install foundation-sites --save
Configuration
In the src/assets/directory, create a directory named foundation-siteswith empty files named: _settings.scssand _global.scss.
In the _global.scssfile, paste the content from: node_modules/foundation-sites/scss/_global.scss.
In the _settings.scssfile, paste the content from: node_modules/foundation-sites/scss/settings/_settings.scss.
In the _settings.scssfile, find the line with @import 'util/util';and change it to point to the proper directory:@import '../node_modules/foundation-sites/scss/util/util';
In src/styles.sass, add the import statements from node_modules/foundation-sites/scss/foundation.scss, adjusting the directory path as in the example below. Note that we are using our custom settings and global files that we placed in the src/assets/foundation-sitesdirectory.
/\*\*
- Foundation for Sites by ZURB
- Version 6.3.0
- foundation.zurb.com
- Licensed under MIT Open Source
\*/
// Dependencies
@import "../node_modules/foundation-sites/\_vendor/normalize-scss/sass/normalize";
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/helpers/true';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/functions/purge';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/functions/remove';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/functions/replace';
@import '../node_modules/foundation-sites/\_vendor/sassy-lists/stylesheets/functions/to-list';
// Sass utilities
@import '../node_modules/foundation-sites/scss/util/util';
// Settings (Custom)
@import "assets/foundation-sites/settings";
// Global variables and styles (Custom)
@import 'assets/foundation-sites/global';
// Components
@import '../node_modules/foundation-sites/scss/grid/grid';
@import '../node_modules/foundation-sites/scss/typography/typography';
@import '../node_modules/foundation-sites/scss/forms/forms';
@import '../node_modules/foundation-sites/scss/components/visibility';
@import '../node_modules/foundation-sites/scss/components/float';
@import '../node_modules/foundation-sites/scss/components/button';
@import '../node_modules/foundation-sites/scss/components/button-group';
@import '../node_modules/foundation-sites/scss/components/accordion-menu';
@import '../node_modules/foundation-sites/scss/components/accordion';
@import '../node_modules/foundation-sites/scss/components/badge';
@import '../node_modules/foundation-sites/scss/components/breadcrumbs';
@import '../node_modules/foundation-sites/scss/components/callout';
@import '../node_modules/foundation-sites/scss/components/card';
@import '../node_modules/foundation-sites/scss/components/close-button';
@import '../node_modules/foundation-sites/scss/components/drilldown';
@import '../node_modules/foundation-sites/scss/components/dropdown-menu';
@import '../node_modules/foundation-sites/scss/components/dropdown';
@import '../node_modules/foundation-sites/scss/components/flex';
@import '../node_modules/foundation-sites/scss/components/responsive-embed';
@import '../node_modules/foundation-sites/scss/components/label';
@import '../node_modules/foundation-sites/scss/components/media-object';
@import '../node_modules/foundation-sites/scss/components/menu';
@import '../node_modules/foundation-sites/scss/components/menu-icon';
@import '../node_modules/foundation-sites/scss/components/off-canvas';
@import '../node_modules/foundation-sites/scss/components/orbit';
@import '../node_modules/foundation-sites/scss/components/pagination';
@import '../node_modules/foundation-sites/scss/components/progress-bar';
@import '../node_modules/foundation-sites/scss/components/reveal';
@import '../node_modules/foundation-sites/scss/components/slider';
@import '../node_modules/foundation-sites/scss/components/sticky';
@import '../node_modules/foundation-sites/scss/components/switch';
@import '../node_modules/foundation-sites/scss/components/table';
@import '../node_modules/foundation-sites/scss/components/tabs';
@import '../node_modules/foundation-sites/scss/components/title-bar';
@import '../node_modules/foundation-sites/scss/components/top-bar';
@import '../node_modules/foundation-sites/scss/components/thumbnail';
@import '../node_modules/foundation-sites/scss/components/tooltip';
@mixin foundation-everything($flex: false) {
@if $flex {
\$global-flexbox: true !global;
}
@include foundation-global-styles;
@if not \$flex {
@include foundation-grid;
}
@else {
@include foundation-flex-grid;
}
@include foundation-typography;
@include foundation-forms;
@include foundation-button;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
@if \$flex {
@include foundation-flex-classes;
}
}
@include foundation-everything(true);Rename the /src/styles.sassfile to have the SCSS file extension: /src/styles.scss.
Open angular-cli.json in the root directory of the app and, under apps.styles, change "styles.sass"to "styles.scss".
In angular-cli.json, change defaults.styleExtfrom "sass"to "scss".
Development
Run the project with the ng servecommand. The Foundation for Sites styles should be applied to your HTML, which you can view by directing your browser to http://localhost:4200.
