How to split a string into separate parts in SCSS?

Question

Sass

You need to make a special mixin on the SCSS preprocessor. The bottom line is that you need to pass the input through a @includestring of the form (10, 20)well or (10px, 20px). The full mixin should look something like this: @include font( (10px, 20px), 600, 24px ). These two bracketed values ​​in (10px,20px)the mixin are taken as one variable. And now you need to divide these two values ​​​​already in the mixin into two independent values. Is there a way to do this with SCSS?

Answer 1

Use space, Do not use brackets. Open the documentation where there are examples with 2 variables.

Answer 2

Is there any way to do this with SCSS?

Yes, there is a corresponding method for the list: . For example: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);
}