Error: Import directives may not be used within control directives or mixins.

[saper]

Reported on gitter by @safareli

Input file:

@mixin import-google-fonts() {
  @import url("http://fonts.googleapis.com/css?family=#{$family}");
}
$family: unquote("Droid+Sans");
@include import-google-fonts();

Works for Ruby Sass, libsass fails with:

Error: Import directives may not be used within control directives or mixins.
        on line 2 of spec/misc/todo_import_in_mixin/input.scss
>>   @import url("http://fonts.googleapis.com/css?family=#{$family}");
   --^
.
Expected: 1
  Actual: 0

4 runs, 12 assertions, 4 failures, 0 errors, 0 skips

Used

sassc: 3.3.0
libsass: 3.3.2
sass2scss: 1.0.5

[safareli]

+1

[xzyfer]

Spec added sass/sass-spec#602

[unfulvio]

+1

[harryfinn]

@saper this error is also present when trying to @import "local/file"; (local import rather than from external url) - is there something in place to also allow this with libsass or an accepted current limitation of @import for local files?

[xzyfer]

This error isn't about what you're importing, but where you're importing. The error is telling you that you cannot use @import inside a mixin or control directives like @if/@else/@for/@each etc..

[harryfinn]

@xzyfer from what I understand of the associated PR's above, PR #1848 allows the use of @import within control directives for libsass, bringing it inline with ruby sass, or have I got that wrong?

I've just tried @saper's code in my libsass powered project and it now works having updated my version of node-sass (which I assume therefore includes the fixes in PR #1848) however, when I amend the code to use a local file it fails again

[xzyfer]

This is a tricky issue, and one that LibSass doesn't get 100% correct. Technically there are two kinds of imports, Sass imports and CSS imports. What kind of import an @import is depends on what you're importing.

If you're obviously importing another Sass files then it's a Sass import. Sass imports are not allowed in mixins and control directives. This is the case you're running into so the error is correct.

If you're importing something from an URL or file with a .css extension then it's a CSS import, and it can be used in mixins and control directives.

This bug was regarding us incorrectly erring when CSS import (because it's a remote font url) is used in a mixin. Unfortunately it appeats this behaviour has once again broken.

[harryfinn]

@xzyfer Ah that make sense then, thanks for the explanation!

[xzyfer]

I've created an issue for tracking the regression in #2096