Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="btn btn-with-icon btn-medium">
<span>Button</span>
<span class="arrow-icon"></span>
</div>

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

// *** btn variables ***
$btn-radius: 2px;
$btn-font-weight: 400;
$btn-height: 40px;
$btn-padding: 40px;

$btn-base-size: 50px;
$btn-multiplier: 1.2;

$btn-sizes: tiny, small, medium, large;

@mixin btn-base($display: inline-block, $width: $btn-padding, $height: $btn-height, $radius: $btn-radius, $weight: $btn-font-weight) {
  display: $display;
  padding: 0 $btn-padding;
  border-radius: $radius;
  font-weight: $weight;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  line-height: $height;
}

@mixin btn-with-icon($align: center, $icon-height: null, $height: $btn-height) {
  span {
      display: inline-block;
      vertical-align: middle;
    }
    @if $align == opposite {
    span:first-child{
      float: left;
    }
    span + span {
      float: right;
      margin-top: ($btn-height - $icon-height)/2;
    }
  }
}

.btn {
  background: lightBlue;
  @include btn-base();
}

.btn-with-icon {
  @include btn-with-icon(opposite, 16px);
  height: 40px;
}

@for $i from 1 through length($btn-sizes) {
    .btn-#{nth($btn-sizes, $i)} {
      width: $btn-base-size * ($btn-multiplier * $i);
    }
}

.arrow-icon {
  background: url(https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_3-16.png) no-repeat;
  width: 16px;
  height: 16px;
}

SassMeister-output.css

.btn {
  background: lightBlue;
  display: inline-block;
  padding: 0 40px;
  border-radius: 2px;
  font-weight: 400;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  line-height: 40px; }

.btn-with-icon {
  height: 40px; }
  .btn-with-icon span {
    display: inline-block;
    vertical-align: middle; }
  .btn-with-icon span:first-child {
    float: left; }
  .btn-with-icon span + span {
    float: right;
    margin-top: 12px; }

.btn-tiny {
  width: 60px; }

.btn-small {
  width: 120px; }

.btn-medium {
  width: 180px; }

.btn-large {
  width: 240px; }

.arrow-icon {
  background: url(https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_3-16.png) no-repeat;
  width: 16px;
  height: 16px; }

SassMeister-rendered.html

<div class="btn btn-with-icon btn-medium">
<span>Button</span>
<span class="arrow-icon"></span>
</div>