Concaténer les chaînes en moins
Je pense que ce n'est pas possible, mais je pensais demander au cas où il y aurait un moyen. L'idée est que j'ai une variable pour le chemin vers le dossier de ressources web:
@root: "../img/";
@file: "test.css";
@url: @root@file;
.px {
background-image: url(@url);
}
Je reçois ceci en conséquence:
.px { background-image: url("../img/" "test.css"); }
Mais, je veux que les chaînes se combinent en une chaîne comme ceci:
.px { background-image: url("../img/test.css"); }
Est-il possible de concaténer des chaînes ensemble en moins?
6 réponses
Utiliser Interpolation De Variable:
@url: "@{root}@{file}";
Code Complet:
@root: "../img/";
@file: "test.css";
@url: "@{root}@{file}";
.px{ background-image: url(@url); }
Comme vous pouvez le voir dans la documentation , vous pouvez également utiliser l'interpolation de chaîne avec des chaînes variables et simples ensemble:
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
Je cherchais la même astuce pour gérer les images. J'ai utilisé un mixin pour répondre à ceci:
.bg-img(@img-name,@color:"black"){
@base-path:~"./images/@{color}/";
background-image: url("@{base-path}@{img-name}");
}
Ensuite, vous pouvez utiliser:
.px{
.bg-img("dot.png");
}
Ou
.px{
.bg-img("dot.png","red");
}
Je ne sais pas si vous utilisez moins.js ou lessphp (comme dans WP-Moins de plugin pour WordPress), mais avec lessphp vous pouvez "vulgaire" des chaînes de caractères avec ~ : http://leafo.net/lessphp/docs/#string_unquoting
Pour les valeurs unitaires de type chaîne comme 45deg dans transform: rotate(45deg), Utilisez la fonction unit(value, suffix).
Exemple:
// 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);
Utilisation De Drupal 7. J'ai utilisé une marque plus ordinaire et ça marche:
@images_path+'bg.png'