Padding Hack SASS ✤✤✤✤ & Faux Color Overlay Hover ✤✤

Ich hab mich ja vor einer Weile in SASS verliebt. Hat eine Weile gedauert, ehe ich mich rangetraut habe und jetzt frage ich mich wirklich, wie ich CSS ohne SASS gesschrieben habe, es spart so viel Zeit! Heute bin ich über meine Mixins gegangen und habe etwas mit dem padding-Hack rumgespielt, wobei gleichzeitig noch dieser Faux-Overlay Effekt entstanden ist. Wie wir das machen, möchte ich euch heute zeigen. (Falls ihr SASS noch nicht kennt, checkt definitiv die Website aus und probiert es aus, es ist grandios!) Wenn ihr wollt, dass ich noch einen Einführungspost zu SASS schreibe, gebt bescheid. :)

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 :)

See the Pen Dbpgj by Myri (@bekreatief) on CodePen.

English Deutsch

Wir beginnen mit einem einfachen Markup. Eine Section, in der wir Container mit Links platzieren. Diese Links sind unsere Bild-Container. Für das richtige Verhältnis verwenden wir den padding hack (Höhe wird als 0 definiert, ein prozentuales padding unten sorgt dafür, dass das Verhältnis des Containers stimmt, der Link darin wird eingepasst und wir haben einen responsiven Container, dessen Verhältnis fix ist). Die Bilder werden dann als Hintergrundbild des Links definiert und gewissermassen in das richtige Verhältnis geschnitten. Für den Padding-Hack schreiben wir ein Mixin, dem wir drei Variabeln übergeben. Die Breite des div-containers in Prozent, sowie das Verhältnis, welches aus einer Breitenzahl und einer Höhenzahl besteht. Für den Link definieren wir die CSS ebenfalls in einem Extend-Only Selektor.
Seht euch das Beispiel unten an. Verändert die Variabeln, um zu sehen, wie einfach es geht.

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.

/*                 PADDING HACK SASS
---------------------------------------------------------*/

//Variables
//-------------------------------------------------
$containerwidth: 30%;
$ratiowidth: 16;
$ratioheight: 9;


//Mixins
//-------------------------------------------------
@mixin paddinghack($containerwidth, $ratiowidth, $ratioheight){ 
  // $containerwidth: width of the responsive container
  // $imgwidth and $imgheight stand for aspect ratio you want to  achieve (example: 16:9)
    position: relative;
    width: $containerwidth;
    height: 0;
    padding: (($ratioheight / $ratiowidth) * $containerwidth) 0 0 0;
}

// Extend Only
//-------------------------------------------------
%paddinghack{
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

// SASS
//------------------------------------------------------------
div{
  @include paddinghack($containerwidth, $ratiowidth, $ratioheight);
  a{
    @extend %paddinghack;
    display: block;
    background: {
      image: url(http://th07.deviantart.net/fs71/PRE/f/2014/174/1/7/17a514b56717abed29512fddb462de82-d7nmo0f.png);
      size: cover;
      position: center;
    }
  }
}

See the Pen epvkL by Myri (@bekreatief) on CodePen.

Mit SASS können wir auch noch etwas mehr Mathematik machen. Haben wir zum Beispiel 3 Bilder, die wir nebeneinander platzieren wollen, auf voller Breite mit einem Rand zwischen den Bildern, aber ohne Rand links beim ersten und ohne Rand rechts beim letzten Bild, so können wir SASS die exakte Breite für uns berechnen lassen. Und das für jeden beliebigen Rand (irgendjemand da, der jetzt noch sagt SASS ist uncool?)

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?)

/*                 PADDING HACK SASS
---------------------------------------------------------*/

//Variables
//-------------------------------------------------
$margin: 1%; 
$containerwidth: 100%;
$ratiowidth: 4;
$ratioheight: 3;


//Mixins
//-------------------------------------------------
@mixin paddinghack($containerwidth, $ratiowidth, $ratioheight){ 
  // $containerwidth: width of the responsive container
  // $imgwidth and $imgheight stand for aspect ratio you want to  achieve (example: 16:9)
    position: relative;
    width: $containerwidth;
    height: 0;
    padding: (($ratioheight / $ratiowidth) * $containerwidth) 0 0 0;
}

// Extend Only
//-------------------------------------------------
%paddinghack{
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

// SASS
//------------------------------------------------------------
section{
  width: $containerwidth;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

div{
  float: left;
  box-sizing: border-box;
  @include paddinghack(((100%-($margin*4))/3), $ratiowidth, $ratioheight);
  margin: 0 $margin;
  
  &:first-of-type{
    margin-left: 0;
    
    a{
      background-image: url(http://th07.deviantart.net/fs71/PRE/f/2014/174/1/7/17a514b56717abed29512fddb462de82-d7nmo0f.png);
    }
  }
  
  &:nth-of-type(2){
    
    a{
      background-image: url(http://th03.deviantart.net/fs70/PRE/f/2012/080/2/5/25bd377c1206148061f9bdcd8304f6a4-d4th6pk.png);
    
    }
  }

  &:last-of-type{
    margin-right: 0;
    
    a{
      background-image: url(http://th00.deviantart.net/fs71/PRE/i/2012/015/3/d/red_center_by_mynimi94-d4mgrp4.png);
    
    }
  }
  
  a{
    @extend %paddinghack;
    display: block;
    background: {
      size: cover;
      position: center;
    }
  }
}

See the Pen wmtoK by Myri (@bekreatief) on CodePen.

Und den Faux-Overlay nenn ich so, weil wir keine Ebene über das Bild legen, sondern dem div-container eine Hintergrundfarbe geben und beim Hover einfach die Deckkraft des Bildes verringern, sodass der Eindruck entsteht, das Bild würde leicht eingefärbt. Und das ist alles :D

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.

/*                 PADDING HACK SASS
---------------------------------------------------------*/

//Variables
//-------------------------------------------------
$fontcolor: #fff;
$linkcolor: complement(#d1aecf);
$hovercolor: darken($fontcolor, 40%);
$hovertint: $linkcolor;
$bgcolor: darken($linkcolor, 62%);

$margin: 1%; 
$containerwidth: 50%;
$ratiowidth: 1;
$ratioheight: 1;


//Mixins
//-------------------------------------------------
@mixin paddinghack($containerwidth, $ratiowidth, $ratioheight){ 
  // $containerwidth: width of the responsive container
  // $imgwidth and $imgheight stand for aspect ratio you want to  achieve (example: 16:9)
    position: relative;
    width: $containerwidth;
    height: 0;
    padding: (($ratioheight / $ratiowidth) * $containerwidth) 0 0 0;
}

// Extend Only
//-------------------------------------------------
%paddinghack{
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

// SASS
//------------------------------------------------------------
body{
  background: $bgcolor;
  color: $fontcolor;
  font:{
    family: Roboto, Calibri, sans-serif;
    size: 1em;
    weight: 300;
  }
}

section{
  width: $containerwidth;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

div{
  float: left;
  box-sizing: border-box;
  @include paddinghack(((100%-($margin*4))/3), $ratiowidth, $ratioheight);
  margin: 0 $margin;
  background-color: $hovertint;
  &:first-of-type{
    margin-left: 0;
  }
  &:last-of-type{
    margin-right: 0;
  }
  
  a{
    @extend %paddinghack;
    display: block;
    transition: 1s linear;
    background: {
//    image: url(imgURL) --> done with jQuery
      size: cover;
      position: center;
    }
    
    &:hover{
      transition: .3s linear;
      opacity: .6;
    }
    
    img{
      display: none;
    }
  }
}

p{
  position: fixed;
  bottom: 3px;
  right: 3px;
  
  a{
    text-decoration: none;
    transition: .3s ease;
    color: $linkcolor;
    
    &:hover{
      color: $hovercolor;
    }
  }
}

See the Pen Padding Hack SASS by Myri (@bekreatief) on CodePen.