Generated by SassMeister.com.

Arrows-Mixin.html

<div class="slider">
  <div class="imgWrapper"></div>
  <div class="arrow arrowPrev"></div>
  <div class="arrow arrowNext"></div>
</div>

SassMeister-input-HTML.html

<div class="slider">
  <div class="imgWrapper">
    <img alt="This cat is a placeholder image" src="http://lorempixel.com/g/500/300/cats/" />
  </div>
  <div class="arrow arrowPrev"></div>
  <div class="arrow arrowNext"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import 'bourbon/bourbon';
@import url(http://weloveiconfonts.com/api/?family=entypo);

.slider {
  margin:20px auto;
  position:relative;
  width:50%;
}
.imgWrapper {
  margin:0 auto;
  width:80%;
  max-width:500px;
}

.arrowPrev, .arrowNext {
  vertical-align:top;
  &:hover, &:focus {
    cursor:pointer;
    opacity:0.6;
  }
}

@mixin arrow($direction: right) {
  content: '\e766';
  font-family: 'entypo', sans-serif;
  font-size:36px;
  position:absolute;
  top:48%;
  
  @if $direction == right {
    right:0;
  }
  @else if $direction == left {
    left:0;
    @include transform(rotate(180deg));
  }
}

.arrowPrev:before { @include arrow(left); }
.arrowNext:before { @include arrow(right); }

SassMeister-output.css

@import url(http://weloveiconfonts.com/api/?family=entypo);
.slider {
  margin: 20px auto;
  position: relative;
  width: 50%;
}

.imgWrapper {
  margin: 0 auto;
  width: 80%;
}

.arrowPrev, .arrowNext {
  vertical-align: top;
}

.arrowPrev:hover, .arrowPrev:focus, .arrowNext:hover, .arrowNext:focus {
  cursor: pointer;
  opacity: 0.6;
}

.arrowPrev:before {
  content: '\e766';
  font-family: 'entypo', sans-serif;
  font-size: 36px;
  position: absolute;
  top: 48%;
  left: 0;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.arrowNext:before {
  content: '\e766';
  font-family: 'entypo', sans-serif;
  font-size: 36px;
  position: absolute;
  top: 48%;
  right: 0;
}

SassMeister-rendered.html

<div class="slider">
  <div class="imgWrapper">
    <img alt="This cat is a placeholder image" src="http://lorempixel.com/g/500/300/cats/" />
  </div>
  <div class="arrow arrowPrev"></div>
  <div class="arrow arrowNext"></div>
</div>