使用索引访问Sass列表元素

我正在尝试为每种大小的设备设置一个分辨率范围

$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)

我正在尝试插入我创建的

函数

$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)) {}

$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

---

有什么问题吗？

我刚刚意识到它不像

javascript

行为，我需要在调用函数之前先初始化它。我应该去掉

列表

类，直接使用

nth

。像这样的

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

$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