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