Question

I’m working on a Rails project with quite some stylesheets written in sass. The layout is as follows right now:

We have a manifest (application.sass) that requires a couple of other sass files:

// in application.sass:
/*
 *= require reset
 *= require base
 *= require forms
 ...
 */

These other stylesheets all include a “partial” with some color definitions and use these extensively:

// in _colors.sass:
$foreground: '#F00'
$background: '#0F0'
// ...


// in base.sass:
@import colors.sass
#content
  background-color: $background
// ...


// in forms.sass:
@import colors.sass
form
  color: $foreground
// ...

I’d now like to generate a copy of the resulting stylesheet that contains the same rules with just the color definitions swapped out (e.g. a red_application.sass that is an exact clone of application.sass with just all color definitions in _var.sass swapped out).

I tried moving the importing of the color definitions into the manifest file like follows:

// in application.sass:
/*
 *= require _colors.sass
 *= require reset
 *= require base
 *= require forms
 ...
 */

// in red_application.sass:
/*
 *= require _red_colors.sass
 *= require reset
 *= require base
 *= require forms
 ...
 */

// in base.sass:
// no @import
#content
  background-color: $background
// ...


// in forms.sass:
// no @import
form
  color: $foreground
// ...

Unfortunately, this does not work since the single stylesheets (base.sass, forms.sass) cannot be generated without the @import statement since they do not know about the variables used within them.

How could I restructure our stylesheets to achieve my goal?

Answer 1

Don’t mix sprockets requires with scss imports.

For sprocket to work, each required file must be a complete css (after compilation), and the resulting file will contain the contents of all css files.

scss imports are resolved during the compilation phase, so you can’t do as you intend.

What you can do is to import the colors in each of the main scss, and don’t let sprockets require things:

in application.sass:

@import _colors
@import reset
@import base
@import forms

in red_application.sass:

@import _red_colors
@import reset
@import base
@import forms