img-replace with SASS

Question

I created a mixin to manipulate easily images and replace, now my app it is growing and I don't know how to improve this code.

basically I have a include: @include img-replace("logo.png", 104px, 47px, inline-block); where I simple change the name of the image and define the pixels width and height.

I would like change it because now, some developers want just change that image name and not worry about the size anymore understand?

in that case the image has: width: 104px and height:47px, so they would like not to worry about it anymore since the next image can be bigger or smaller.

so guys any solution for this? thank you.

$path--rel      : "../images";

@mixin img-replace($img, $w, $h, $disp: block) {
    background-image: url('#{$path--rel}/#{$img}');
    background-repeat: no-repeat;
    width: $w;
    height: $h;
    display: $disp;
}


.site-logo {
  @include img-replace("logo.png", 104px, 47px, inline-block);
  margin-top: 8px;
  margin-left: 6px;
}

Answer 1

Using SASS, you are able to set default values against parameters in a mixin; in your example for instance, I have specified the width to be 104px by default and the height to be 47px by default:

$path--rel: "../images";

@mixin img-replace($img, $w:104px, $h:47px, $disp:null) {
  background-image: url('#{$path--rel}/#{$img}');
  background-repeat: no-repeat;
  width: $w;
  height: $h;
  @if ($disp) {display: $disp;}
}

.site-logo {
  @include img-replace(
      $img: "logo.png",
      $disp: "inline-block"
  );
  margin-top: 8px;
  margin-left: 6px;
}

If $w,$h or $disp are left off the default values get rendered. This essentially makes them optional.