Sass background mixins using url

guys i would like to create a background mixin instead of writing a repeating url

@mixin bgimage($name){ $url:"../images/$name.png"; background: url($url);} 

and it never takes the value value in the variable $ name

i called him

  @include bgimage(name.png); 

and in css the output turned out to be wrong, like this

  background: url("../images/$name.png"); 

Is there any way to write url in mixin? ot how to do it in a short way

+4
source share
1 answer

try with variable interpolation #{$name}

 @mixin bgimage($name) { $url:"../images/#{$name}.png"; background: url($url); } 

and pass the file name without the extension as the mixin parameter:

 @include bgimage(your-png-file-without-extension); 

since it is already added to the $url variable of your mixin

+14
source

Source: https://habr.com/ru/post/1493414/


All Articles