덜 CSS가있는 이중 URL

Question

나는 망막 배경 이미지에 대한 간단한 LESS 스타일 시트를 가지고 있지만, 결국 도메인 이름이 url 앞에 붙어서 이미지를 표시하지 못합니다.

예 : URL이 http://mydomain.com/'_img/background@2x.jpg'으로 변경되고 'in'이 있기 때문에 표시되지 않습니다. 그런 일을 어떻게 막을 수 있습니까?

.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

난 당신이 게시 ... 나는 "는 @해야 두 번째 배경 이미지 라인을 믿지 코드에 오타가있다 생각합니다.

어쨌든, 당신이 문제를 해결할 수있는 방법은 (자바 스크립트 부분의 @ {경로}를 따옴표없이) 다음에 문자열 보간 '@{at2x_path}'을 사용하여 출력 URL을 따옴표로 묶는 것입니다. 덜에서

:

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

---

: 나는 1.3.3과 1.4 베타 버전이 테스트

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

는 두 시간은 다음과 같은

CSS 출력했다

편집 : javascript Andre를 사용하여 아래 주석에서 발견했듯이 lessphp에서 구문 분석 오류가 발생합니다.

이

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

이 솔루션은 동일한 결과를 제공해야하며, 자바 스크립트를 필요로하지 않습니다 그래서 여기 당신이 믹스 인을 별도의 인수로 끝나는 파일을 공급함으로써, 단지 어떤 자바 스크립트와 LESS이 할 수있는 방법을 방법입니다. 그러나 이제는 두 개의 인수로 파일 이름을 분리하여 전송해야합니다.