Libsass: Error: media query expression must begin with '('

[sassanh]

This is my sassc version:

> sassc --version
sassc: 8d3d
libsass: 5a54
sass2scss: 1.0.5

which is latest HEAD version, when I run:

> sassc Frontend/sass/app.scss -I Frontend/bower_components/foundation-sites/scss

I get this error:

Error: media query expression must begin with '('
        on line 138 of Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss
>>
   -----------^

But compass compiles it:

> compass compile
`DEPRECATION WARNING on line 245 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(small only)}")

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 249 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(medium)}")

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 250 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(medium only)}")

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 254 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(large)}")

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 255 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(large only)}")

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 259 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(xlarge)}")

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 260 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(xlarge only)}")

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 264 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(xxlarge)}")

You can use the sass-convert command to automatically fix most cases.

DEPRECATION WARNING on line 265 of /some/path/Frontend/bower_components/foundation-sites/scss/util/_breakpoint.scss: #{} interpolation near operators will be simplified
in a future version of Sass. To preserve the current behavior, use quotes:

  unquote("screen and #{breakpoint(xxlarge only)}")

You can use the sass-convert command to automatically fix most cases.

    write stylesheets/app.css

Any idea what's going on here?

[sassanh]

This is the line that raises the error:

       @media screen and #{$str} {

If I add a @debug $str on top of it, it'll print out:

/some/path/bower_components/foundation-sites/scss/util/_breakpoint.scss:138 DEBUG: "'(min-width: "40em)'

[xzyfer]

I am unable to reproduce this error with

$str: '(min-width: 40em)';

@media screen and #{$str} {
  a { foo: bar; }
}

[xzyfer]

Without a working sample of code that reproduces this error there isn't anything we can do. We will not debug your entire app.

[xzyfer]

Turns out if I get bored enough I will debug a framework. This is a regression in 3.3.3.

foo {
  bar: 'test' + '1 #{2} 3';
}

LibSass 3.3.2

foo {
  bar: "test1 2 3"; }

LibSass 3.3.2

foo {
  bar: "test'1 "2 3'; }

[xzyfer]

Spec added https://github.com/sass/sass-spec/pull/725

[bdkjones]

Anyway you guys could do a hotfix release for this? It's affecting a wide number of people who are trying to compile Foundation 6 with Libsass. If the milestone is 3.3.4 (which you're saying is March), I'll have to roll back to Libsass 3.3.2—this bug is a showstopper.

[xzyfer]

@bdkjones we don't currently have a patch available. I'll take a look after dinner. If we don't release 3.3.4 in the next 8hrs I would rollback back to 3.3.2.

In the future we'll add foundation to our release checklist.

[bdkjones]

Ok. I'll rollback. Adding Foundation to the release check sounds like a great idea; it's massively popular and has lots of complex Sass that provides a great real-world test.

[joopvos]

Same problems here. Is there a doc about how to rollback Libsass in Codekit? I'm a front-front-end guy ... :\

[edit]
Oops ... I thought I updated Codekit but I didn't ... with 2.7.1 everything is fine now ... :)

[bdkjones]

Update to CodeKit 2.7.1. I rolled Libsass back in that release.

Sent from my iPhone

On Feb 11, 2016, at 22:52, Joop Vos [email protected] wrote:

Same problems here. Is there a doc about how to rollback Libsass in Codekit? I'm a front-front-end guy ... :\

—
Reply to this email directly or view it on GitHub.

[xzyfer]

A simplied test case

foo {
  bar: '#{b}' + az;
}

[mgreter]

Will see if I can tackle this one too. Sometimes I wonder if we will ever run out of "edge" cases ...

[shoaibik]

Hi, I can confirm having a same error, I am using the latest Foundation

>> Error: media query expression must begin with '('
>>         on line 139 of components/foundation-sites/scss/util/_breakpoint.scss
>> >>
>>    -----------^

[lenz]

Same Problem here when using python-libsass 0.10.1 (=libbsass 3.2.3) on Debian 8 and OS X 10.8.
Error: media query expression must begin with '('

Moreover on OS X 10.7 the Django runserver exits with a malloc error!
The malloc and media query problems are fixed on all systems when downgrading to python-libsass 10.0.0 (=libbsass 3.2.2)