Sass: how to change paths for imported stylesheets using variables? - variables

Question

So, I'm getting crazy. I've got a
/style-1.scss
and then
/css/style-2.scss
style-2 imports style-1 and compiles in /css
style-1 also compiles in root /
style-1 also imports _utilities and _fonts (that should use the path variables)
I've got to set paths for sprites and fonts on style-1, but obviously I'd like to change the path based on the fact that style-1 is imported or directly compiled
I've tried to use global vars and then a flag var to use like this:
#if variable-exists($imported) do this.. else..
But no luck. It seems you can't change global variables from anywhere before or after importing.
Have you ever faced a problem like this? Any solution?

Answer 1

The unwanted behaviour of your styles is the result of how sass works.
Sass #import imports and renders (if the file contains css output) files in order that statements are made. So if you create an imported file that defines and use internally some variables to create css output, although you modify them before or after import, the css output will remain be the same. Here's an example:
foo.scss
$width: 10px;
a { width: $width; }
bar.scss
$width: 20px;
#import "foo"; // Import and then renders
$width: 30px;
bar.css
a { width: 10px; }
So you have mainly two alternatives:
Use !default
!default description from SASS reference
You can assign to variables if they aren’t already assigned by adding the !default flag to
the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.
So, in your case, you can do this:
style-1.scss
#import "utilities";
#import "fonts"
$foo-sprite: "path/to/foo.png" !default;
.foo-icon { background-image:url($foo-sprite) }
style-2.scss
$foo-sprite: "../path/to/foo.png";
#import "../style-1.scss";
And these would be the CSS output files:
style-1.css
.foo-icon { background-image:url("path/to/foo.png") }
style-2.css
.foo-icon { background-image:url("../path/to/foo.png") }
Create a new partial imported in both files
Sometimes you can't edit variables because it comes from imported frameworks so, in this case, the best way to deal with your problem is creating a new partial to be imported by style-1.scss and style-2.scss, let's call it _common.scss. _common.scss should contain the sass code from style-1.scss that must be rendered. This way, you can get different paths for each style file.
style-1.scss
#import "utilities";
#import "fonts";
#import "common"; // This is the
style-2.scss
#import "utilities";
#import "fonts";
#import "paths"; // You can import here different sprite and font paths
$foo-path: "../foo/bar.css" // You can also declare variables here if you prefer
#import "common";