Concatenar cadeias de caracteres em Menos

129

Eu acho que isso não é possível, mas pensei em perguntar se existe um caminho. A idéia é que eu tenho uma variável para o caminho para a pasta de recursos da web:

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

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

Eu recebo isso como resultado:

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

Mas, eu quero que as strings se combinem em uma string como esta:

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

É possível concatenar seqüências de caracteres juntas em Menos?

— juminoz
fonte

225

Use interpolação variável :

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

Código completo:

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

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

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

— Paulo
fonte

Obrigado pela resposta! Isto é perfeito. Agora posso garantir que, mesmo que o caminho do contexto mude, não haverá um pesadelo de refatoração.

— juminoz

Obrigado, me deparei com o mesmo problema e perdi isso nos documentos.

— David

Obrigado @Paulpro! Eu estava tendo um problema com VS Web Compiler add-on, onde foi mudando meu background-image url, e eu não estava muito certo como fazer concatenação :)

— hatsrumandcode

6

Apenas uma observação para as pessoas que podem pousar nessa resposta, mas que estão tentando usá-la, por exemplo, para combinar uma variável numérica com uma sequência como pxou %: Você pode cancelar a citação da sequência, antecipando-a com um til ~, como tal:width: ~"@{w}px";

— AsGoodAsItGets

29

Como você pode ver na documentação , você pode usar a interpolação de cadeias também com cadeias variáveis e simples juntas:

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

— Stephan Hoyer
fonte

12

Eu estava procurando o mesmo truque para lidar com imagens. Eu usei um mixin para responder a isso:

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

Então você pode usar:

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

ou

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

— user2725509
fonte

Olá e bem-vindo! por que você acha que a resposta aceita não é mais válida? está desatualizado? houve uma melhoria tecnológica? Está errado? por que o seu é melhor?

— STT LCU

9

Para aqueles corda-como unidade de valores como 45degna transform: rotate(45deg)utilização da unit(value, suffix)função. Exemplo:

// 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);

— jordanb
fonte

1

Tecnicamente, não responde à pergunta, mas ainda é um truque útil.

— trysis

7

Não sei se você está usando less.js ou lessphp (como no plugin WP-Less para WordPress), mas com lessphp você pode "descriptografar" as strings com ~: http://leafo.net/lessphp/docs/#string_unquoting

— FelipeAls
fonte

1

Isso funciona com MENOS regulares também. Não sei se aconteceu em 2012 quando esta resposta foi escrita.

— trysis

-7

Usando o Drupal 7. Eu usei uma marca de adição comum e está funcionando:

@images_path+'bg.png'

— Gaba
fonte

5

A menos que ele queira aprender Drupal apenas para concat strings para usá-lo em LESS / CSS, acho que sua sugestão é inútil. Sem ofensa, só estou dizendo.

— Oznmuyes