Ignore parts of sass file for parsing

Question

I'm trying to get SASS to ignore part of my .scss code while parsing.

It's for a shopify theme that I'm making. My scss files are compiled into .css.liquid files so that I can put shopify's templating language liquid into the css too.

I want the compiled css.liquid to look like this:

.header--logo {
  background: url({{ 'header-logo.png' | asset_url }}) 0 0 no-repeat;
}

In LESS I used to do this:

.header--logo {
  background: ~"{{ 'header-logo.png' | asset_url }}" 0 0 no-repeat;
}

Does SASS also have an easy way to do the same?

Thanks!

Answer 1

Sass doesn't provide an escape-all-the-declaration feature.

To pass a CSS value as-is, without being parsed with Sass, put it into quotes and use the unquote() function to remove the quotes:

.header--logo {
  background: unquote("url({{ 'header-logo.png' | asset_url }}) 0 0 no-repeat");
}

If you use that very often, you can make it a tad easier with a helper function:

@function i($str) {
  @return unquote($str);
}

.header--logo {
  background: i("url({{ 'header-logo.png' | asset_url }}) 0 0 no-repeat");
}

Alternatively, you can "igonre" a part of the value rather than the whole value. You'll need interpolation to do this, i. e. #{unquote('...')}. Example usage:

.header--logo {
  background: url(#{unquote("{{ 'header-logo.png' | asset_url }}")}) 0 0 no-repeat;
}

Demo of all approaches: http://sassmeister.com/gist/4920a805f0451192ec9b