SASS-EE Media Query with background images

Josh's Avatar

Josh

14 Aug, 2011 10:38 PM

Think I spotted another bug with the SASS EE extension.

When I have the following in my stylesheet:

@media only screen and (min-width: 320px) { h1 {

width: 176px;
height: 80px;
background-image: url(/nedcremin.com/images/interface/l/logo_low_res.png) no-repeat 0 0;
text-indent: -9009px;

} }

I get the following error:

Fatal error: Uncaught exception 'SassScriptOperationException' with message 'Undefined operation "op_unary_div" for SassString: style.scss::546 Source: background-image: url(/nedcremin.com/images/interface/l/logo_low_res.png) no-repeat 0 0' in /home/nedcremi/public_html/nc_admin/expressionengine/third_party/sassee/libraries/sass/script/SassScriptOperation.php:139 Stack trace: #0 /home/nedcremi/public_html/nc_admin/expressionengine/third_party/sassee/libraries/sass/script/SassScriptParser.php(89): SassScriptOperation->perform(Array) #1 /home/nedcremi/public_html/nc_admin/expressionengine/third_party/sassee/libraries/sass/script/SassScriptLexer.php(62): SassScriptParser->evaluate('/nedcremin.com/...', Object(SassContext)) #2 /home/nedcremi/public_html/nc_admin/expressionengine/third_party/sassee/libraries/sass/script/SassScriptParser.php(108): SassScriptLexer->lex(' url(/nedcremin...', Object(SassContext)) #3 /home/nedcremi/public_html/nc_admin/expressionengine/third_party/sassee/libraries/sass/script/SassScriptParser.php(7 in /home/nedcremi/public_html/nc_admin/expressionengine/third_party/sassee/libraries/sass/script/SassScriptOperation.php on line 139

  1. 1 Posted by Josh on 14 Aug, 2011 10:40 PM

    Josh's Avatar

    the url for the image should say /images/...

  2. 2 Posted by Josh on 14 Aug, 2011 10:41 PM

    Josh's Avatar

    Gosh...and the CSS property "background:"

  3. Support Staff 3 Posted by Wouter Vervloet on 15 Aug, 2011 05:32 AM

    Wouter Vervloet's Avatar

    Hi Josh,

    A quick way to fix it would be to wrap your filename with quotes, like this:

    background-image: url('/nedcremin.com/images/interface/l/logo_low_res.png') no-repeat 0 0;
    

    The parser recognizes the slashes in the filename as division operators an tries to do the math (literaly). This is something I've always done in CSS out of consistency between languages.

    Are there any other url(...) parameters without quotes in that css file that are working?

    – Wouter

  4. 4 Posted by Josh on 15 Aug, 2011 01:16 PM

    Josh's Avatar

    You must think I am crazy ;)
    Well I can explain but first off yes I am sure this is the issue.

    My daily work habits have crept in from the Rails project and Sass/Compass gems we are using...I have configs set up so that URLs in my scad files are compiled without Quotes.

    Amazing how daily routine crept in!

    Sorry for the silly bug report!

  5. Support Staff 5 Posted by Wouter Vervloet on 15 Aug, 2011 01:54 PM

    Wouter Vervloet's Avatar

    So you're all set?

  6. 6 Posted by Josh on 15 Aug, 2011 03:03 PM

    Josh's Avatar

    Yes. Please delete this thread. I am sorry I wasted your time on this :(

  7. Support Staff 7 Posted by Wouter Vervloet on 15 Aug, 2011 03:09 PM

    Wouter Vervloet's Avatar

    I'm not deleting the thread, just closing it. Might come in handy for other people bumping into the same problem (and I'm sure there will be a few) ;)

    – Wouter

  8. Wouter Vervloet closed this discussion on 15 Aug, 2011 03:09 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac