使用索引访问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