Geek Answers Handbook

Exception {and% in SASS

I am creating a stylesheet that will be uploaded to the HubSpot CMS, and I was hoping to create a CSS file locally using SASS to speed up my encoding. I am having difficulty because the output file must include some proprietary template tags defined by CMS.

In particular, I need my generated CSS file to include the following line:

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

I tried everything I could imagine to output the characters { and % , but SASS gives me errors no matter what I do, as these are special characters in SASS.

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

+7
sass escaping character
source share
1 answer

It is not very, but I got it to work. You will have empty comments on the sides.

 $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 will do this a lot:

 @mixin raw ($string) { $string: '*/#{$string}/*'; /*#{$string}*/ } @include raw('{% include "hubspot/styles/responsive/required_base.css" %}');

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

If you are using some kind of building tool, it's probably best to add it to the CSS itself. Something like https://github.com/godaddy/gulp-header

+7
source share

More articles:


All Articles