img-replace with SASS

user_964836 0
Viewed 730

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;
}
sass css
4 Answers

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.

user_4937620

The problem is that if you make the sizes optional, the element will have no width or height. This means the dev will still have to determine the elements' size or else it will just be 0x0 and the picture won't show!

If the problem is that the dev is too lazy to find and write the size of the images, you could always use a map to store all images and their sizes, so the function would insert the correct sizing depending on the image value. Read more here

user_16201940

So if i understand correctly, you want to use this mixin, by just passing the image path. But each image has a different size. This cannot be done with SASS. Instead, you should add your image inline, eg:

<img src="images/logo.png" alt="">

or

<img src="images/logo.png" alt="" width="104" height="74">

Otherwise the answer by @chris-spittles above is correct, meaning that you should pass the default width and height to your mixin. And if you want to continue using the mixin you will need to pass the width and height for the images that have different dimensions.

user_60635470

As suggested before if you change your mixin to this -

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

You can use your code flexibly without having any need to assign width and height arguments. So, now, if you write this - 

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

it will get compiled to -

.site-logo {
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  display: block;
  margin-top: 8px;
  margin-left: 6px;
}

It will also preserve your previously written codes, without any changes.

Now, if you have any specific requirements, like providing default values to different types of images which a developer can assign, you can add maps in your code - 

$small-img: ( w: 100px, h: 100px );
$medium-img: ( w: 200px, h: 200px );

Now you can call img-replace like this - 

.site-logo {
  @include img-replace("logo.png", $small-img...);
}
.site-medium-image {
  @include img-replace("logo.png", $medium-img...);
}

This will get compiled to - 

.site-logo {
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  display: block;
  width: 100px;
  height: 100px;
}
.site-medium-image {
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  display: block;
  width: 200px;
  height: 200px;
}

This ... makes arguments variable arguments

Sass supports "variable arguments," which are arguments at the end of a mixin or function declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by ...

user_87743860
Related