我试图让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; }所有方法的演示: sassmeister/gist/4920a805f0451192ec9b
更多推荐
忽略sass文件的部分进行解析
发布评论