2

I use Foundation with Compass and Sass to create the stylesheets. In my scss folder I have _settings.scss, app.scss and files specific for each page group. For example, customers page has it's own stylesheet as well as settings.

I want to keep the files separated for easy use and for reduced file sizes. If I transfer all the files in one piece, it's a huge waste because some of the styles are only needed on one page. My app.scss has general styling for the page and it is included in all the pages. In top of that file I have

@import "settings";
@import "foundation";
@import "compass/layout.scss";

These allow me to use the built-in functions like rem-calc from Foundation. However, if I include these in all of the different stylesheets, I get duplicates of these styles inside the includes. Including foundation generates a huge amount of styles and I don't want to have duplicates of them.

If I don't include these files, I can't use things like rem-calc(). Without the import lines the Compass compiler doesn't know what to do with the mixins etc.

How do I keep my files separated but have the functionality of the Compass and Foundation stylesheets without including them multiple times?

strivedi183
  • 4,749
  • 2
  • 31
  • 38
MikkoP
  • 4,864
  • 16
  • 58
  • 106
  • possible duplicate of [How can one import only variables and mixins from Scss stylehsheets?](http://stackoverflow.com/questions/18408324/how-can-one-import-only-variables-and-mixins-from-scss-stylehsheets) – cimmanon Feb 14 '14 at 15:23

1 Answers1

0

Create one main .scss file ( app.scss ) make sure you are watching that file and @import your individual files to that one main app.scss file.

You can then import just one file across each page once compiled rather than having multiple versions of the same code.

Scott
  • 28
  • 7
  • 1
    This is the easiest method but like I said there are a lot of styles that are specific to only one page. I'd like to import them only when needed. – MikkoP Feb 17 '14 at 07:26