Less.js: `background`省略形プロパティ内でCSS3background-sizeを使用すると、構文エラーが発生します

作成日 2013年01月10日 · 7コメント · ソース: less/less.js

CSS3の新しいbackground-sizeプロパティは、次のようにスラッシュでbackground-position仕様から分離することにより、 background省略形宣言に含めることができます。

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

その結果、構文エラーが発生しますが、パーサーは明らかに/ contain部分を窒息させます。これを削除すると、エラーも消えます。

もちろん、 backgroundプロパティの値全体を~"…"でエスケープすることでこの問題を回避することは可能ですが、制限なしでデフォルトの構文を使用できると非常に便利です。

bug medium priority

ソース

yggi49

最も参考になるコメント

@ gpv-dev

--strict-math=onオプションなしでコンパイルすると、結果が期待されfontプロパティを除く）では、 --strict-math=onを使用するか、 /にエスケープを設定する必要があります（例： ~"0/100%" 。

seven-phases-max 2015年01月07日

👍2

全てのコメント7件

PR＃915のサブケースのように見えますが、しばらくの間、そのニュースはありません...

plumbojumbo 2013年01月16日

はい、まさにそのため、1.4.0になります。 @dmcassがそれを終わらせないなら、

lukeapage 2013年01月16日

マスターで修正

lukeapage 2013年02月02日

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

lessc2.1.1を使用してLinuxMint 17Qianaで実行します。

yang-jandro 2015年01月07日

@ gpv-dev

seven-phases-max 2015年01月07日

👍2

@ seven-phases-max

素早い対応に感謝致します。あなたの提案はまさに私が必要としていたものでした。

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`省略形プロパティ内でCSS3background-sizeを使用すると、構文エラーが発生します

最も参考になるコメント

全てのコメント7件

関連する問題