Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

sass background mixins using url [duplicate]

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

like image 875
Vivek Vikranth Avatar asked Jul 25 '13 10:07

Vivek Vikranth


1 Answers

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

like image 155
Fabrizio Calderan Avatar answered Nov 15 '22 11:11

Fabrizio Calderan