忽略sass文件的部分进行解析 [英] Ignore parts of sass file for parsing

问题描述

我试图让SASS在解析时忽略我的.scss代码的一部分.

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

这是我正在制作的shopify主题.我的scss文件被编译成.css.liquid文件，因此我也可以将shopify的模板语言液体放入css中.

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.

我希望编译后的css.liquid看起来像这样:

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;
}

SASS是否也有简单的方法来做同样的事情?

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

谢谢！

推荐答案

Sass没有提供所有转义声明功能.

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

要不经Sass解析就按原样传递CSS值，请将其放在引号中，然后使用unquote()函数删除引号:

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");
}

或者，您可以忽略"值的一部分，而不是整个值.您需要进行插值才能做到这一点，i. e. #{unquote('...')}.用法示例:

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;
}

所有方法的演示: http://sassmeister.com/gist/4920a805f0451192ec9b

这篇关于忽略sass文件的部分进行解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！