Escaping { and % in SASS

Question

I'm building a stylesheet that will be uploaded to the HubSpot CMS, and I was hoping to develop the CSS file locally using SASS to speed up my coding. I'm running into difficulty because the output file needs to include some proprietary template tags specified by the CMS.

In particular, I need my generated CSS file to include a line like this:

{% include "hubspot/styles/responsive/required_base.css" %}

I've tried everything I can think of to output the { and % characters, but SASS gives me errors no matter what I do since those are special characters in SASS.

Is there a way to escape a line of code, or individual characters so SASS will not try to process them?

Answer 1

It's not pretty by any means but I got it to work. You'll have empty comments on the sides of it.

$inc: '*/{% include "hubspot/styles/responsive/required_base.css" %}/*';
/*#{$inc}*/

Outputs:

/**/{% include "hubspot/styles/responsive/required_base.css" %}/**/

Here is a demo: http://sassmeister.com/gist/19651edf94cf1158037f

Here it is in mixin form if you'll be doing it a lot:

@mixin raw ($string) {
  $string: '*/#{$string}/*';
  /*#{$string}*/
}

@include raw('{% include "hubspot/styles/responsive/required_base.css" %}');

and a small demo for this as well: http://sassmeister.com/gist/50caee499ff4fe8f63c7

If you're using some kind of build tool it would probably be better adding it to the CSS itself. Something like https://github.com/godaddy/gulp-header