Custom SASS mixin solution missing single quotes

[Chanse Campbell]

I'm just in the process of implementing EQCSS into an existing project that uses Sass and Gulp, and used your custom mixin solutions provided within the docs but ran into a few strange issues.

It turns out that the recommended solution wont work on my device (Mac OSX) as the first line of the @include _raw mixin was basically escaping out due to it's quotations opening and closing within the first line, meaning that the mixin was never using the @content for the element query (resulting in no style being applied). It seems that the mixin solution doesn't take into account the quotes that also need to wrap the content too.

To get around this I simply changed the code from this:

@at-root {
    @include _raw("@element #{inspect($element-query)} {");
      @content;
    @include _raw("}");
}

To this:

@at-root {
    @include _raw("'@element #{inspect($element-query)} {");
      @content;
    @include _raw("}'");
}

I'm not sure if it was just a strange error for myself, but that seemed to get around the issue and now the element queries work as expected.

[Tommy Hodgins]

Hey @chansecampbell! Thanks for playing around with EQCSS and also thanks so much for reporting how you got it working. Using EQCSS inside SASS is something people ask about all the time so having a better idea how to troubleshoot making that work will come in handy!

[Tommy Hodgins]

Hey @chansecampbell, I just noticed somebody else also reworked that Sass mixin like this: https://github.com/kittn/generator-kittn/blob/5cce8337fd93dcc14757c3d65183bb62a6a8b76a/app/templates/src/framework/core/mixins/_eqcss.scss

Is that any better than the original one for what you're trying to accomplish?

[Chanse Campbell]

@tomhodgins Thanks for that, but the original mixin did the required job more simply after that small fix. Cheers for putting together this library 👍

[Tommy Hodgins]

Thanks so much @chansecampbell, hope you have fun using it! Feel free to join us any time in the EQCSS Gitter chat room to share stuff you're building, ask questions, or discuss any of these ideas or techniques :D

[Andy]

Hi guys,

Where is _raw defined as a mixin? I get an error so I'm assuming its not a standard sass mixin:

error /home/xxx/css/sass/resa-booking-modal.scss (Line 938: Undefined mixin '_raw'.)

Thanks

Andy