Passing a sass list to a @mixin with multiple arguments

[William Guldin]

Hi,

I'm new here and trying to do something that I'm not sure is possible with scss. I'm attempting to write a mixin that will allow me to style the different value states of the <progress> element. 

Ideally, the mixin would work like this:

@mixin progress-value($value..., $color...) {

progress[value="#{$value}"] {

color: #{$color}; // For IE 10 progress bar

&::-webkit-progress-value { background-color:  #{$color}; }

&::-moz-progress-bar { background-color: #{$color}; }

}

}

// Several different values passed as a sass list.

@include progress-value("0.25, #de2b23", "0.5, #FF8330", "0.75, #8A9F4A", "1, #14BB64");

So, I'd like the mixin to allow you to style different values of the progress bar, as it is incremented. I'm not sure how to go about taking that list of variables and applying them to the mixin arguments, though. Should I try to split each string and parse it, or is there some obvious solution here I'm missing that would work better? Thanks for all the help!

[Nathan Weizenbaum]

You can pass a list of pairs, like so: https://gist.github.com/nex3/39c15bfdbeb0bc368ed5

--
You received this message because you are subscribed to the Google Groups "Sass" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sass-lang+...@googlegroups.com.
To post to this group, send email to sass...@googlegroups.com.
Visit this group at http://groups.google.com/group/sass-lang.
For more options, visit https://groups.google.com/groups/opt_out.