Доступ к элементу списка Sass с индексом

Question

Я пытаюсь установить диапазон разрешения для размера устройства

$screen:       "only screen" !default
$medium-range:  (40.063em, 64em)

Теперь я хотел получить его элемент, поэтому я создал для него функцию

@function upper-bound($list)
    @return list.nth($list, 2)

@function lower-bound($list)
    @return list.nth($list, 1)

Я пытаюсь interpolate function, который я создал

$medium-only:  "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default

Но когда я смотрю на сгенерированный CSS, он становится таким:

@media only screen and (min-width:$lower-bound($medium-range)) and (max-width:upper-bound(40.063em, 64em)) {}

В чем может быть проблема?

Answer 1

Я только что понял, что это не похоже на поведение javascript, и мне нужно сначала инициализировать функцию перед ее вызовом. И я должен отказаться от класса list и вместо этого использовать nth напрямую. Как то так.

$screen:       "(only screen)" !default
$medium-range:  (40.063em, 64em)

@function upper-bound($list)
    @return nth($list, 2)

@function lower-bound($list)
    @return nth($list, 1)

$medium-only:  "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default