Как в SCSS разделить строку на отдельные части?

Question

[Sectorrbs]

Нужно сделать специальный миксин на препроцессоре SCSS. Суть в том, что на вход нужно передать через @include строку вида (10, 20) ну или (10px, 20px). В полном виде миксин примерно так должен выглядеть: @include font( (10px, 20px), 600, 24px ). Вот этих два значения в скобках (10px,20px) в миксине принимаются как одна переменная. И вот нужно этих два значения уже в миксине разделить на два независимых значения. Можно ли так как-нибудь сделать силами SCSS?

Comments

[Sectorrbs]

Потому что есть миксин, который вторым параметром принимает 600 - это font-weight. первым параметром в миксине идет font-size. На данный момент это одна цифра - условно, 30px. Но сейчас появилась необходимость первым параметром передавать вот так (30px, 20px), так как уже в самом миксине нужно использовать 2 параметра шрифта - меньший и больший. НЕ ВАРИАНТ второй параметр шрифта передавать в этом миксине вторым параметром, так как, опять же, вторым идёт font-weight, и это никак не поменять

Answer 1

[Алексей Дубровин]

Использовать пробел, Не использовать скобки. Открыть документацию где есть примеры с 2мя переменными.

Answer 2

[Сергей]

Можно ли так как-нибудь сделать силами SCSS

Да, для списка есть соответствующий метод: nth($list, $n). Например:

@mixin font($font-size, $font-weight, $anotherValue: null) {
  $length: length($font-size);
  
  @if $length > 2 {
    @warn "Too many values: #{$font-size}."
  }
  
  @if $length == 1 {
    font-size: $font-size;
  }
  
  @if $length == 2 {
    $size1: nth($font-size, 1);
    $size2: nth($font-size, 2);
    
    font-size: $size1;
    
    @media (min-width: 768px) {
      font-size: $size2;
    }
  }
  
  font-weight: $font-weight;
}

// одно значение
.element1 {
  @include font(24px, 700);
}

// два значения
.element2 {
  @include font(24px 32px, 700);
  // или если хочется разделить запятой:
  @include font((24px, 32px), 700);
}