If/else conditions are incredibly useful when you want a part of your code to depend on something else. This gives maximum flexibility to write the type of logic that meets your needs.
Image size
If you need the exact dimensions of an image all preprocessors have a way to do that instead of you.
.image {
bg-size: image-size("img.png");
bg-width: image-width("img.png");
bg-height: image-height("img.png");
}
.image {
bg-size: image-width("img.png") image-height("img.png");
bg-width: image-width("img.png");
bg-height: image-height("img.png");
}
.image
bg-size: image-width("img.png") image-height("img.png")
bg-width: image-width("img.png")
bg-height: image-height("img.png")
.image
bg-size: image-size("img.png")
bg-width: image-size("img.png")[0]
bg-height: image-size("img.png")[1]
.image {
width: width("img.png");
height: height("img.png");
background-size: size("img.png");
}
.image {
bg-size: 20px 10px;
bg-width: 20px;
bg-height: 10px;
}
Inline image
Encoding images to base64 and inlining them in your stylesheets reduces the number of request a user will make on your site, here's how to automate the conversion of images to base64.
Note that for Stylus you need to use the url function, the positive side is that you can use any name for the function - inline-image is just an example.
.image {
background-image: data-uri("pixel.png");
}
.image {
background-image: inline-image("pixel.png");
}
.image
background-image: inline-image("pixel.png")
.image
background-image: inline-image("pixel.png")
.image {
background-image: inline("pixel.png");
}
.image {
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
}