How to add own style.scss to environment

Foundation for Sites
#1

Hi,
i want to create a scss file in scss/my-style.scss and add parse it to the css/app.css using gulp (in the foundation package, version 6.6.3).
The reason is that i want to separate my own CSS from the foundation css…
Does anybody have an idea on how to do this?

I tried to add the sassPaths in the gulpfile.js but it did not work…

#2

Do you want to post the contents of your gulpfile and we can take a look?

#3

If you are using the SASS from the Zurb Template, I recommend you go to src/scss/app.scss file. Then import your custom scss file. I import a scss file called typography.scss that resides in the global folder, so in the app.scss file I add this: @import ‘global/typography’;

#4

To add to Tphoto’s reply:

I make a new file in /src/assets/scss/_mycss.scss
In _mycss.scss add any new classes in plain css. (Note the underscore)
For example to place images on the right:

.imgRight{ float: right; margin: 10px; }

Open /src/assets/scss/app.scss and add:

@import ‘settings’;
@import ‘foundation’;
@import ‘motion-ui’;
@import ‘mycss.scss’;

Notice there is no underscore in the import lines. When Terminal updates the site, all the css will be consolidated in the /dist/assets/css/app.css file.
When you update your public site, make sure to update the css folder on the live site.