Двойной URL с LESS CSS

Question

У меня есть простая таблица стилей LESS для фоновых изображений сетчатки, но в итоге происходит добавление моего доменного имени к URL-адресу и не удается отобразить изображение.

Пример: это изменит URL на http://mydomain.com/'_img/[e-mail]', а затем он не отображается, потому что там есть "там". Как я могу предотвратить это от такого?

.at2x(@path, @w: auto, @h: auto) {
    background-image: url(@path);
    @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") +     "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

    @media all and (-webkit-min-device-pixel-ratio : 1.5) {
        background-image: url("at2x_path);
        background-size: @w @h;
    }
}

html {
    .at2x('_img/background.jpg', 1440px, 900px);
}

Answer 1

Я полагаю, что в коде, который вы разместили, есть опечатка... Я верю во второй строке фонового изображения " должен быть @,

В любом случае, он мог бы решить вашу проблему, сделав это следующим образом (без кавычек вокруг @{path} в части javascript), а затем используя интерполяцию строк. '@{at2x_path}' чтобы получить кавычки вокруг выходного URL.

в МЕНЬШЕ:

.at2x(@path, @w: auto, @h: auto) {
    background-image: url(@path);
    @at2x_path: ~`@{path}.split('.').slice(0, @{path}.split('.').length - 1).join('.') +  '@2x.' + @{path}.split('.')[@{path}.split('.').length - 1]`;

    @media all and (-webkit-min-device-pixel-ratio : 1.5) {
        background-image: url('@{at2x_path}');
        background-size: @w @h;
    }
}

html {
    .at2x('_img/background.jpg', 1440px, 900px);
}

Я протестировал это в 1.3.3 и 1.4 бета, оба раза это дало следующее

CSS-вывод:

html {
  background-image: url('http://mydomain.com/_img/background.jpg');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  html {
    background-image: url('http://mydomain.com/_img/[e-mail]');
    background-size: 1440px 900px;
  }
}

---

Изменить: так как это использует JavaScript, Андре заметил в комментарии ниже, что он вызывает ошибку синтаксического анализа в lessphp. Итак, вот способ, которым вы могли бы сделать это только с LESS без javascript, передавая mixin в файл, заканчивающийся отдельным аргументом:

.at2x(@path, @sfx, @w: auto, @h: auto) {
    background-image: url('@{path}.@{sfx}');
    @media all and (-webkit-min-device-pixel-ratio : 1.5) {
        background-image: url('@{path}@2x.@{sfx}');
        background-size: @w @h;
    }
}

html {
    .at2x('_img/background', 'jpg', 1440px, 900px);
}

Это решение должно дать тот же результат и не требует JavaScript. Однако теперь вам нужно убедиться, что вы отправляете имя файла, разделенное на два аргумента.