Creo que esto no es posible, pero pensé en preguntar en caso de que hay una manera. La idea es que tengo una variable para la ruta de acceso a la web de la carpeta de recursos:

@root: "../img/";
@file: "test.css";
@url: @[email protected];

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

Me sale esto como resultado:

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

Pero, quiero que las cuerdas se combinan en una cadena como esta:

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

Es posible concatenar cadenas de Menos?

InformationsquelleAutor juminoz | 2012-04-21

6 Comentarios

  1. 214

    Uso Variable De Interpolación:

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

    Código completo:

    @root: "../img/";
    @file: "test.css";
    
    @url: "@{root}@{file}";
    
    .px{ background-image: url(@url); }
    • Gracias por la respuesta! Esto es perfecto. Ahora me puede asegurarse de que incluso si el contexto de cambios de ruta de acceso, no habrá una refactorización pesadilla.
    • Gracias, me encontré con el mismo problema y se perdió de que en la documentación.
    • Gracias @Paulpro! Yo estaba teniendo un problema con la Web de VS Compilador add-on, donde fue cambiar mi fondo-url de la imagen, y yo no estaba muy seguro de cómo hacer la concatenación 🙂
    • Sólo una nota para las personas que podrían aterrizar en esta respuesta, pero están tratando de utilizar por ejemplo, para combinar una variable numérica con una cadena como px o %: Usted puede cancelar la cotización de la cadena de pre-pendiente con una tilde ~, tales como: width: ~"@{w}px";
  2. 29

    Como se puede ver en la documentación, puede utilizar la interpolación de cadenas también con variables y cadenas simples juntos:

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

    Yo estaba mirando para el mismo truco para la manipulación de imágenes. He utilizado un mixin para responder a esta:

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

    A continuación, puede utilizar :

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

    o

    .px{
        .bg-img("dot.png","red");
    }
    • Hola y bienvenida! ¿por qué crees que el aceptado la respuesta no es válida? es obsoleta? ha habido una mejora tecnológica? Es incorrecto? ¿por qué la tuya es mejor?
  4. 8

    Para aquellos cadena-como unidad de valores como 45deg en transform: rotate(45deg) utilizar el unit(value, suffix) función.
    Ejemplo:

    //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);
    • No técnicamente responder a la pregunta, pero sigue siendo un truco útil.
  5. -7

    Utilizando Drupal 7. He usado un ordinario plus marca y de trabajo:

    @images_path+'bg.png'
    • A menos que voluntariamente para aprender Drupal sólo para la concatenación de cadenas para usar en MENOS/CSS, creo que tu sugerencia es inútil. Sin ofender a nadie, solo estoy diciendo.

Dejar respuesta

Please enter your comment!
Please enter your name here