Sassee fails with @media queries?

Michael C.'s Avatar

Michael C.

15 Oct, 2012 11:53 PM

Is there something special I need to do to get @media queries working in Sassee?

This works:

body { margin: 0; }

This doesn't:

body { margin: 0; }
@media (min-width: 768px) {
    body {margin: 5px; }
}

Nor does this:

body {
    margin: 0;
    @media screen and (min-width: 768px) {
        margin: 5px;
    }
}

I get a buttload of PHP errors whenever it fails:

A PHP Error was encountered

Severity: Warning

Message: Missing argument 2 for SassExpandedRenderer::renderProperties(), called in /home/public_html/system/expressionengine/third_party/sassee/libraries/sass/renderers/SassNestedRenderer.php on line 48 and defined

Filename: renderers/SassExpandedRenderer.php

Line Number: 58
A PHP Error was encountered

Severity: Notice

Message: Trying to get property of non-object

Filename: renderers/SassNestedRenderer.php

Line Number: 38
A PHP Error was encountered

Severity: Notice

Message: Undefined variable: properties

Filename: renderers/SassExpandedRenderer.php

Line Number: 60
A PHP Error was encountered

Severity: Warning

Message: join() [function.join]: Invalid arguments passed

Filename: renderers/SassExpandedRenderer.php

Line Number: 60
A PHP Error was encountered

Severity: Warning

Message: Cannot modify header information - headers already sent by (output started at /home/public_html/system/codeigniter/system/core/Exceptions.php:170)

Filename: core/Common.php

Line Number: 408

Fatal error: ob_start() [ref.outcontrol]: Cannot use output buffering in output buffering display handlers in /home/public_html/system/codeigniter/system/core/Exceptions.php on line 166

  1. Support Staff 1 Posted by Wouter Vervloet on 21 Oct, 2012 08:42 PM

    Wouter Vervloet's Avatar

    Hi Michael,

    I'll look into it, but it is probably something in the SASS parser I'm using for Sassee, so it might take a while to find a solid solution.

    – Wouter

  2. 2 Posted by Michael C. on 25 Oct, 2012 12:19 PM

    Michael C.'s Avatar

    Thanks Wouter. I figured it was probably a parser problem. Are you able to reproduce the error on your end?

  3. 3 Posted by Michael C. on 25 Nov, 2012 02:48 PM

    Michael C.'s Avatar

    Any news in this? Just wondering... ;)

  4. Support Staff 4 Posted by Wouter Vervloet on 05 Dec, 2012 08:09 PM

    Wouter Vervloet's Avatar

    Hi Michael,

    This is something that isn't properly supported by the SASS parser I am using and it is no longer actively developed by the developer. Since it is a pretty big library I am not sure I can fix this for you without introducing other bugs...

    I only recently found a fork of the original library that is actively maintained, but I haven't had time to implement it yet.

    http://www.phpsass.com/

    – Wouter

  5. 5 Posted by Michael C. on 05 Dec, 2012 10:06 PM

    Michael C.'s Avatar

    No worries - I totally understand being at the mercy of a 3rd-party system. ;) Hope PHPSass ends up being a simple switch to make. :)

  6. Support Staff 6 Posted by Wouter Vervloet on 05 Dec, 2012 10:08 PM

    Wouter Vervloet's Avatar

    I hope it is... when initially developing Sassee I kind of took into account that this might happen, so I kept the parser library completely separate from my own code. So with a bit of luck it's just plug-and-play.

    – Wouter

  7. 7 Posted by Michael C. on 29 Jan, 2013 02:22 PM

    Michael C.'s Avatar

    Just a friendly neighborhood *bump*... ;)

  8. 8 Posted by Michael C. on 29 Jan, 2013 02:29 PM

    Michael C.'s Avatar

    Actually, I just realized that I put a @media query in my SCSS file a few days ago and it didn't give me any errors... I'm on Sassee v1.01, and I don't think I've updated anything... should I be as confused as I am about this?

  9. Support Staff 9 Posted by Wouter Vervloet on 29 Jan, 2013 11:10 PM

    Wouter Vervloet's Avatar

    Hi Michael,

    Could you perhaps paste the @media query here you added recently? Perhaps the SASS parser just doesn't understand some of the @media syntax.

    – Wouter

  10. 10 Posted by Michael C. on 03 Feb, 2013 02:43 PM

    Michael C.'s Avatar

    Yup, here:

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px)
    {
        body
        {
            padding-top: 0;
        }
        .sdd-menu
        {
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            .container
            {
                padding: 10px 20px;
                .media, .media .media
                {
                    margin-top: 5px;
                }
                .media-heading
                {
                    margin: 0;
                    color: $link-color-light-bg;
                }
            }
        }
    
    }
    
    /* Landscape phones and down */
    @media (max-width: 480px)
    {
        .hero-unit
        {
            padding: 20px 10px;
        }
        .hero-unit.bg-image
        {
            .wrapper
            {
                margin: 0 -10px;
                padding: 10px 20px;
            }
        }
    
        blockquote.pullquote
        {
            margin: 10px;
            max-width: 60%;
        }
    }
    
  11. 11 Posted by Michael C. on 28 Feb, 2013 02:52 PM

    Michael C.'s Avatar

    So, any idea why one works but the other doesn't?

  12. Support Staff 12 Posted by Wouter Vervloet on 01 Mar, 2013 04:18 PM

    Wouter Vervloet's Avatar

    I haven't been able to verify this yet, but I suspect it fails on @media queries with 'min-width', but it works with 'max-width'...

    – Wouter

  13. 13 Posted by Michael C. on 05 Mar, 2013 03:00 PM

    Michael C.'s Avatar

    Well, I tested against both max-width and min-width, and I can't seem to replicate even the original issue. Not sure why not - AFAIK nothing changed with Sassee or whatever. At this point I'm fine with calling this fixed until it happens to crop up again. Thanks for the help, Wouter!

  14. 14 Posted by Michael C. on 07 Mar, 2013 08:33 PM

    Michael C.'s Avatar

    Ok, I've run across another error with the SASS lib that Sassee is using. The library gives a "Properties can not be assigned at root level" error when it encounters this type of selector (note the double semi-colon):

    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    

    From a quick Google, it appears to be a common issue with that library (PhamlP, right?).

    So, what would it take to swap out the current library for PHPSass? Is it something I could hack together fairly easily?

  15. 15 Posted by Michael C. on 07 Mar, 2013 09:19 PM

    Michael C.'s Avatar

    Ok, well I took a closer look at phpsass.com, and noticed that it's essentially the exact same library, just more up-to-date (which is what you said to begin with). So in the third_party/sassee/libraries/ folder, I renamed sass/ to sass.orig/, and created a new sass/ folder, into which I dumped the contents of the phpsass.com library.

    Initial results? So far, so good. :D

  16. Support Staff 16 Posted by Wouter Vervloet on 08 Mar, 2013 08:43 AM

    Wouter Vervloet's Avatar

    Glad you were able to drop in the new parser so easily...

    – Wouter

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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