Is there a way to create a partial path with a variable and pass only the file name into a mixin for background images in SVG format? Below is an example of what I'm trying to achieve:
@url: "url('../images/icons/_mm/";
.bg(@fileName){
background-image:@url @fileName;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
However, it seems like the concatenation is not working correctly. For instance, when using the following code:
.mmWrap{
.bg('swoosh.svg');
}
The generated CSS turns out messy as shown below:
.mmWrap {
background-image: "url('../images/icons/_mm/" 'swoosh.svg';
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
It becomes problematic when trying to pass arguments without quotes as it throws an error in the LESS compiler. I have tried using the escape ~ string without success. Any ideas or solutions would be greatly appreciated. Thank you!