Support interpolation in CSS-based imports #49

chriseppstein opened this Issue Mar 6, 2011 · 19 comments


None yet

chriseppstein commented Mar 6, 2011

@import url("{$googlefonts}&subset=latin");

Should work.

daz4126 commented Mar 15, 2011

This would be useful to be able to list all google fonts in a variable string

McWatt commented Jul 6, 2011

Does this work for sass file @imports? For example, what if I want to do something like this:

$siteID: 103;

@import "custom/_styles.#{$siteID}";

where the partial i'm trying to import is named "_styles.103.scss".

this returns an error...

Line 45: File to import not found or unreadable:



nex3 commented Jan 19, 2012

I'm scaling back this feature in Sass 3.2 due to parsing concerns. The original implementation only worked when the interpolated string or url() was a valid string/url; this means that you couldn't include e.g. quotes or closing parentheses within the string/url (e.g. @import "#{"foo.css"}"). This is contrary to how interpolation worked everywhere else in Sass.

It needs to be easy for the user and the parser to tell whether a given @import is going to be static (compiling to a CSS @import) and when it's going to be dynamic (actually loading Sass from another file). Currently, there are four conditions that cause an import to be treated as static in Sass:

  • It uses url().
  • It begins with "http://".
  • It ends with ".css".
  • It specifies a media query (e.g. @import "screen.css" screen).

If any of these are true for an @import, it will be static. As we only want to allow interpolation of static imports, we should only parse interpolation for these cases, and no others. However, it's not possible to know whether an @import ends with .css or has a media query until after the import string has been parsed, which will require parsing the interpolation, if there is any.

Thus, I'm restricting interpolation to @imports using url(). This will be done via the usual deprecation in the stable releases, with appropriate warnings and upgrade instructions. @imports with interpolation in strings will no longer work in the next release, Sass 3.2.

cdCorey commented Dec 26, 2013

"As we only want to allow interpolation of static imports [...]"

Why is this? Seems to me that we should be able to use variables for Sass includes as well (e.g., for paths).

BenMorel commented Oct 1, 2014

It would definitely be useful to be able to use:

@import url(#{$foundation-dir}/normalize);
@import url(#{$foundation-dir}/foundation/components/grid);

erotte commented Oct 7, 2014


cool +1!

🙏 definitely would be nice...

Was really surprised to learn this didn't work and the issue was closed.

Stephn-R commented Dec 1, 2014

@BenMorel 👍 definitely a better idea to help manage code

shock commented Dec 5, 2014



nex3 commented Dec 5, 2014

The title of this issue is "Support interpolation in CSS-based imports". This is not the place to discuss interpolation in other imports. That's #739.

Einkoro referenced this issue in Semantic-Org/Semantic-UI Feb 9, 2015


[Framework] SASS Support #1147

Jakobud commented Mar 31, 2015

Any status on this? Why was this closed?


nex3 commented Apr 21, 2015

It was closed because the feature landed.

Jakobud commented Apr 21, 2015

Oh in what version is this available?


nex3 commented Apr 23, 2015

3.1.0 and forward.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment