Search code examples
htmlcsswebcompass-sassbootstrap-sass

SASS/Compass: Reference Instead of Include


I'm currently working on a large business website using Compass (the Bootstrap Fork). We are using many different scss files, all of them including base.scss, where our variables and mixins live. Now, we want to compile some optional css files from our scss files, that receive the variables from the base.scss files at compile time, but won't have the overhead of all the other rules defined in base included in the finished and compiled css file. So basically, I'm looking for a way to reference the base file instead of including it. I just want $companyColor (etc...) to be replaced with the value of the corresponding variable in the base file.

Please note, that I cannot have those lose files @imported in my base file, because these files overwrite some of the base rules and are only loaded on certain pages of the website to provide an alternate theme.

Is this at all possible?

Thanks in advance!


Solution

  • Not sure I fully understood what you asked.

    But if you want some variables from base.scss to be included in other scss files, you can split your base.scss in two files:

    • shared-vars.scss containing variables that will be included in optional scss files
    • base.scss containg all other variables and mixins, and importing shared-vars.scss

    Now you can import base.scss in your main scss files and only import shared-vars.scss in your optional scss files