Less에서 문자열 연결

나는 이것이 가능하지 않다고 생각하지만, 방법이있을 경우를 대비하여 생각했다. 아이디어는 웹 리소스 폴더 경로에 대한 변수가 있다는 것입니다.

@root: "../img/";
@file: "test.css";
@url: @root@file;

.px {
    background-image: url(@url);
}

결과적으로 이것을 얻습니다.

.px { background-image: url("../img/" "test.css"); }

그러나 문자열을 다음과 같이 하나의 문자열로 결합하고 싶습니다.

.px { background-image: url("../img/test.css"); }

Less에서 문자열을 함께 연결할 수 있습니까?

변수 보간 사용 :

@url: "@{root}@{file}";

전체 코드 :

@root: "../img/";
@file: "test.css";

@url: "@{root}@{file}";

.px{ background-image: url(@url); }

documentation 에서 볼 수 있듯이 변수 및 일반 문자열과 함께 문자열 보간을 사용할 수 있습니다.

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

이미지 처리와 동일한 트릭을 찾고있었습니다. 나는 이것에 대답하기 위해 mixin을 사용했다 :

.bg-img(@img-name,@color:"black"){
    @base-path:~"./images/@{color}/";
    background-image: url("@{base-path}@{img-name}");
}

그런 다음 사용할 수 있습니다 :

.px{
    .bg-img("dot.png");
}

또는

.px{
    .bg-img("dot.png","red");
}

문자열과 같은 단위 값의 경우 함수 45deg를 transform: rotate(45deg)사용하십시오 unit(value, suffix). 예:

// Mixin
.rotate(@deg) {
  @rotation: unit(@deg, deg);
  -ms-transform: rotate(@rotation);
  transform: rotate(@rotation);
}

// Usage
.rotate(45);

// Output
-ms-transform: rotate(45deg);
transform: rotate(45deg);

당신이 사용하는 경우 몰라 less.js 또는 (처럼 lessphp WP-이하의 워드 프레스를위한 플러그인을) 만에 할 수 있습니다 "맺다"문자열 lessphp와 ~: http://leafo.net/lessphp/docs/#string_unquoting

Drupal 7 사용. 나는 평범한 더하기 표시를 사용했으며 작동합니다.

@images_path+'bg.png'