How to avoid multiple @imports of SASS variables?

Question

The site I'm working on uses the rails asset pipeline and an application.scss file to import and process different CSS files.

However, some stylesheets are used in specific places, and for those, it makes little sense to import them into the global manifest. But not so importing them requires importing variables.scss, and possibly mixins.scss into the sheet itself (so they'll process correctly), resulting in duplicate code in the final CSS.

Is there a way to basically tell the preprocessor - "trust me, the variable/mixin you're seeing will be defined by the time everything gets processed"?

Otherwise, I don't see how to avoid importing every sheet into a single manifest, which seems bloated.

Thanks.

Answer 1

The short answer to your question is no. The variables need to be defined in a logical order from when they are called in compilation. It's like a "chicken and the egg" scenario.

From what I can ascertain in your description, the project you're working on is not compiling into a unified workflow, but chunking out into modular portions relational to your file structure. IF this is the case, what you can do at the beginning of each file is reference the variables file from the root.

In a normal workflow, you would import your scss files based on your defined hierarchy like so:

sass/style.scss

/* Main Stylesheet */

@import "variables";
@import "mixins";

/* Modular Sections */
@import "layout/header";
@import "layout/body";
@import "layout/footer";

would compile out to one stylesheet style.css with a command sass sass/style.scss:style.css

What I'm assuming your project does is have all the /* Modular Sections */ files compile out into their own CSS files.

layout/header.scss

/* Header Stylesheet */
@import "../variables";
@import "../mixins";

Given a files structure that resembles:

/root

  style.scss
  variables.scss
  mixins.scss

  /layouts

    header.scss
    body.scss
    footer.scss

This all seems kinda silly though. I don't know all the parameters that go into your current sass compilation, but I'd recommend using a unified workflow.