sass background mixins using url

Question

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

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

and,it never accept the valuee to $name variable

i called it by

     @include bgimage(name.png);

and in css the output is came wrong like this

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

is there any way to write the url in mixin ? ot how to do it in short way

fcalderan's solution can even be made marginally more concise by neglecting the declaration of a separate `$url` variable. Holding the targeted URL in its own variable doesn't really confer any added benefit since it is (at least, in this scenario) only used once. `@mixin bgimage($name) { background: url("../images/#{$name}.png"); }` — IsenrichO, Apr 15 '17 at 03:14

Fabrizio Calderan · Accepted Answer · 2013-07-25T10:19:57.773

21

try with variable interpolation of #{$name}

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

and pass the filename, without extension, as a mixin parameter:

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

since it is already appended in the $url variable of your mixin

edited Jul 25 '13 at 10:19

answered Jul 25 '13 at 10:12

Fabrizio Calderan

1 Answers1