Less.js: 在 `background` 速记属性中使用 CSS3 background-size 会导致语法错误

创建于 2013-01-10 · 7评论 · 资料来源: less/less.js

CSS3 的新background-size属性可以包含在background简写声明中，方法是用正斜杠将其与background-position规范分开，如下所示：

div {
    background: url('/path/to/image.png') left center / contain no-repeat;
}

然而，结果是语法错误，解析器显然在/ contain部分窒息 - 删除它也会使错误消失。

当然，可以通过使用~"…"转义background属性的整个值来解决这个问题，但是能够不受限制地使用默认语法真的很好。

bug medium priority

资料来源

yggi49

最有用的评论

@gpv-dev

如果您不使用--strict-math=on option编译，您的结果是预期的。到目前为止，对于此类语句（有一个或两个例外，例如font属性），您必须使用--strict-math=on或为/设置一些转义符，例如： ~"0/100%" 。

seven-phases-max 于 2015-01-07

👍2

所有7条评论

看起来像是 PR #915 的一个子案例，但有一段时间没有关于那个的任何消息......

plumbojumbo 于 2013-01-16

是的，正是，这就是为什么它会出现在 1.4.0 中。如果@dmcass没有完成它，我将接受#915。

lukeapage 于 2013-01-16

固定在主

lukeapage 于 2013-02-02

我似乎在lessc 2.1.1 中遇到了这个问题。

/* less */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0/100%;
    position: fixed;
}

/* compiled css */
#header {
    height: 50px;
    width: 100%;
    padding: 0 10px;
    font-size: 20px;
    background: url("/img/nav-back.jpg") 0 0;
    position: fixed;
}

使用lessc 2.1.1 在Linux Mint 17 Qiana 上运行。

yang-jandro 于 2015-01-07

@gpv-dev

seven-phases-max 于 2015-01-07

👍2

@七阶段最大

感谢您及时的回复。你的建议正是我所需要的。

yang-jandro 于 2015-01-08

谢谢@seven-phases-max，让它工作起来：
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;

juukie 于 2017-11-30

此页面是否有帮助？

0 / 5 - 0 等级

Less.js: 在 `background` 速记属性中使用 CSS3 background-size 会导致语法错误

最有用的评论

所有7条评论

相关问题