Double URL avec MOINS css

Question

J'ai une simple feuille de style MOINS pour les images d'arrière-plan de la rétine, mais ce qui finit par arriver, c'est qu'elle ajoute mon nom de domaine à l'URL et ne parvient pas à afficher l'image. Ex: il va changer l'URL à http://mydomain.com/'_img/background@2x.jpg', puis il ne s'affiche pas, car il a le 'là-dedans. Comment puis-je l'empêcher de le faire?

.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

Je crois qu'il ya une faute de frappe dans le code affiché ... Je crois que dans la deuxième ligne image d'arrière-plan du " devrait être un @. De toute façon, la façon dont vous pouvez résoudre votre problème est de le faire comme ceci (sans les guillemets autour de @ {path} dans la partie javascript) et d'utiliser l'interpolation de chaîne '@{at2x_path}' pour obtenir des guillemets autour de l'URL de sortie.

dans MOINS:

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

Je l'ai testé cela à 1.4 beta et 1.3.3, les deux fois, il a donné les éléments suivants

sortie 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/background@2x.jpg'); 
    background-size: 1440px 900px; 
    } 
} 

---

Edit: Comme cela utilise javascript Andre a remarqué dans un commentaire ci-dessous, qu'il jette une erreur d'analyse dans lessphp. Voici donc une façon comment vous pouvez faire cela seulement avec moins sans javascript, en alimentant le mixin le fichier se termine comme argument séparé:

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

Cette solution devrait donner le même résultat et ne nécessite pas javascript. Cependant, maintenant vous devez vous assurer que vous envoyez le nom de fichier divisé en deux arguments.