Lists are how Sass represents the values of CSS declarations like margin: 10px 15px 0 0
or font-face: Helvetica, Arial, sans-serif
. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.
By themselves, lists don't do much. This example illustrates using a list with the [@each rule][each-rule] to create a series of CSS rules based on a list of vendor prefixes.
[Read more on lists][read-more] [read-more]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists [each-rule]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive
$prefix-defaults: -moz- -webkit- -o- -ms- "" !default;
@mixin border-radius($border-radius, $prefixes: $prefix-defaults) {
@each $prefix in $prefixes {
#{$prefix}border-radius: $border-radius;
}
}
.box {
@include border-radius(10px);
}