SCSS @if @else @elseif

gistfile1.scss

// Example

@mixin hoge($num, $str){

  // if $num
  @if $num < 10 {
    margin-top: $num;
  }@else{
    margin-top: 15px;
  }

  // if $str
  float: $str;
  @if $str == left {
    margin-right: 5px;
  }@elseif $str == right {
    margin-left: 5px;
  }
}

.fuga {
  @include hoge(11px, left);
}
.mogo {
  @include hoge(5px, right);
}

// Result

.fuga {
  margin-top: 15px;
  float: left;
  padding-right: 5px;
}

.mogo {
  margin-top: 5px;
  float: right;
  padding-left: 5px;
}