Img-replace with SASS

Question

I created mixin to easily manipulate images and replace, now my application is growing and I don’t know how to improve this code.

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

I would like to change it, because now some developers just want to change this image name and not worry about the size being more clear?

in this case, the image has: width: 104px and height: 47px, so they would like to no longer worry about it, since the next image may be larger or smaller.

so guys some solution for this? thanks.

 $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 can set default values ​​for parameters in mixin; for example, in your example, I indicated that the default width is 104px and the default height is 47px:

 $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 left at their default values, get a render. This essentially makes them optional.

Answer 2

The problem is that if you make the dimensions optional, the element will not have a width or height. This means that the developer will still have to determine the size of the elements, otherwise it will be 0x0 and the image will not be displayed!

If the problem is that the developer is too lazy to find and record the size of the images, you can always use the card to store all the images and their sizes, so the function will insert the correct size depending on the image value. More details here

Answer 3

So, if I understand correctly, you want to use this mixin just by going the image path. But each image has a different size. This cannot be done with SASS. Instead, you should add your image to the line, for example:

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

or

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

Otherwise, the answer to @ chris-spittles above is correct, which means you must pass the default width and height to your mixing. And if you want to continue using mixin, you will need to pass the width and height of the images, which have different sizes.

Answer 4

As suggested earlier, if you change your mixing 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 to assign width and height arguments. So if you write this -

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

it will be compiled into

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

It will also save your previously written codes without any changes.

Now, if you have any specific requirements, such as providing default values ​​for different types of images that a developer can assign, you can add cards to your code -

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

Now you can call img-replace as follows:

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

This will be compiled into

 .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; } 

In this ... the arguments are the arguments of the variable

Sass supports “variable arguments,” which are arguments at the end of a mixin declaration or function that takes all remaining arguments and pack them as a list. These arguments look the same as regular arguments, but follow ...