Сасс миксин для шрифта-высокий перед/после использования


В моей Сасс я использую шрифт потрясающие заявления по всем местам. Я влюблена в него. Я создал Сасс миксин для использования:

Я начал со следующим:

@mixin font-awesome-icon($type, $unicode, $size, $margin, $color, $weight) {
  @if $type == 'after'{
    &:after {
      content:$unicode;
      font-family:"FontAwesome";
      font-size:$size;
      color:$color;
      font-weight:$weight;
      margin:$margin;
      @content;
    }
  }
  @if $type == 'before' {
    &:before {
      content:$unicode;
      font-family:"FontAwesome";
      font-size:$size;
      color:$color;
      font-weight:$weight;
      margin:$margin;
      @content;
    }
  }
}

Я потом подкоротила его дальше к следующему:

@mixin font-awesome-icon($type, $unicode, $size, $margin, $color, $weight) {
  $beforeOrAfter:'';

  @if $type == 'after' {
    $beforeOrAfter:'after';
  }
  @else if $type == 'before' {
    $beforeOrAfter:'before';
  }

  &:#{$beforeOrAfter} {
      content:$unicode;
      font-family:"FontAwesome";
      font-size:$size;
      color:$color;
      font-weight:$weight;
      margin:$margin;
      @content;
    }
}

Использование бы что-то вроде:

.tater {
@include font-awesome-icon(before,'\f0de',2.1em,0 0 0 3em,orange,300);
}

Но я чувствую, что я мог сделать ДО/ПОСЛЕ части пылесоса. Мне в основном нужен, чтобы определить, если это " до " или "после".



285
2
задан 23 февраля 2018 в 04:02 Источник Поделиться
Комментарии
1 ответ

Я не так хорошо знаком с Сасс, но почему бы не передать $тип напрямую:

&:#{$type} {
content:$unicode;
font-family:"FontAwesome";
font-size:$size;
color:$color;
font-weight:$weight;
margin:$margin;
@content;
}

0
ответ дан 23 февраля 2018 в 05:02 Источник Поделиться