Accessing Sass List Element with index

user_2637261 0
Viewed 45

I am trying to put a resolution range per size of the device

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

Now, I wanted to get the element of it, so I created a function for it

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

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

I am trying to interpolate the function that I have created

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

But when I look at the generated CSS, it becomes like this.

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

What could be the problem?

sass
1 Answers

I just realised that it isn't like javascript behaviour and I need to initialise the function first before calling it. And I should drop the list class and instead use the nth directly. Something like this.

$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
user_26372610
Related