Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: Operations - list of values

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);
}

SassMeister Gist

$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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment