I fell in love with SASS a while ago. It took me quite a while until I finally checked it out, but now I'm actually asking myself how I ever wrote CSS without it. It saves a ton of time! Today I want over my mixins and played aroung with the padding-hack, which resulted in this faux overlay effect on the images, I want to show you today. How to achieve this, is what I want to show you today. (If you don't know SASS yet, definitely check out the Website and try it out, it is fantastic!) If you want me to write more of an introduction post on it, let me know :)

We begin with simple markup. A section in which we place containers and links. The links are going to be our image containers. For the right aspect ratio, we will use the padding hack (height of the container will be defined as 0, a padding on the bottom will create a fluid container with a fixed aspect ratio). The Images will be definied as backgrounds of the links and thus, be cut to the right size. For the padding hack we write a mixin, with 3 variables. One for the container width and one each for the aspect ratio height and width. For the link's CSS we define an extend-only selector.
Have a look at the example below. Check the variables to see how simple it is.

With SASS we also have the possibility to do some more math. Let's say we have 3 images, we want to place next to each other, displaying them at full-width, with a margin inbetween, but not at the beginning or end. We can let SASS calculate the exact image width for us, with any margin we want. (somewhere still saying SASS is uncool?)

An the faux overlay is called like that because we do not add a layer over the image, but give the underlaying div-container a background and on hover, decrease the opacity of the image, so that the color of the container is showing through, creating the illusion of a colored image. And that's all there is to it.