<div class="overlay"></div>
<div class="icon-holder"><a href="#" class="genericon genericon-refresh"></a></div>
// Variables
$primary-color: #8BA753;

// Mixin
@mixin font-size($size){
  font-size: $size * 16px;
  font-size: $size * 1rem;
}

@mixin size($height, $width: $height){
  height: $height;
  width: $width;
}

@mixin center-block($margin,$left,$top:$left,$right:$left,$bottom:$left){
  margin: $margin;
  left: $left;
  top: $top;
  right: $right;
  bottom: $bottom;
}

@mixin box-sizing ($value){
  -webkit-box-sizing: $value;
     -moz-box-sizing: $value;
      -ms-box-sizing: $value;
       -o-box-sizing: $value;
          box-sizing: $value;
}

@mixin transition ($value...){
  -webkit-transition: $value;
     -moz-transition: $value;
      -ms-transition: $value;
       -o-transition: $value;
          transition: $value;
}

// Concatenation Example
@mixin transform($property, $num...) {
  -webkit-transform:$property +'('+ $num +')';
     -moz-transform:$property +'('+ $num +')';
      -ms-transform:$property +'('+ $num +')';
       -o-transform:$property +'('+ $num +')';
          transform:$property +'('+ $num +')';
}

// Style
*,body,html{
  @include box-sizing(border-box);
}

body{
  background-color: lighten(black,20%);
  background-image: url('https://pixabay.com/static/uploads/photo/2016/04/07/22/17/rope-1314964_960_720.jpg');
}

.overlay{
  background-color: rgba($primary-color,0.9);
  content: "";
  display: inline-block;
  position: absolute;
  @include box-sizing(border-box);
  @include center-block(auto,0);
  @include size(100%);
}

.icon-holder{
  height: 130px;
  margin: auto;
  position: absolute;
  text-align: center;
  @include center-block(auto,0);
}
a,
a:visited {
  color: white;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  @include transition(ease 1s);
  &:before{
     @include font-size(8);
  }
  &:hover,
  &:focus,
  &:active{
    color: darken(white, 20%);
    @include transform(rotate, 180deg);
  }
}
View Compiled
// not for this time
Rerun