Less.js: Использование CSS3 background-size в сокращенном свойстве background приводит к синтаксической ошибке.

Созданный на 10 янв. 2013 · 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 . К настоящему времени для таких операторов (с одним или двумя исключениями, например, свойство font ) вы должны использовать либо --strict-math=on либо добавить экранирование для / , например: ~"0/100%" .

seven-phases-max 7 янв. 2015

👍2

Все 7 Комментарий

Похоже на частный случай PR # 915, но какое-то время по нему не было никаких новостей ...

plumbojumbo 16 янв. 2013

да, именно поэтому он будет в 1.4.0. Я возьму # 915, если @dmcass его не прикончит.

lukeapage 16 янв. 2013

Исправлено на мастере

lukeapage 2 февр. 2013

Кажется, у меня возникла эта проблема в 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;
}

Работает на Linux Mint 17 Qiana с использованием lessc 2.1.1.

yang-jandro 7 янв. 2015

@ gpv-dev

seven-phases-max 7 янв. 2015

👍2

@ семь фаз-макс

Спасибо за быстрый ответ. Ваше предложение было именно тем, что мне было нужно.

yang-jandro 8 янв. 2015

Спасибо @ seven-phase-max, все заработало:
url(/assets/img/logos/foo.png) 0 0 / ~"167px auto" no-repeat;
url(/assets/img/logos/foo.png) 0 0 / contain no-repeat;