Skip to content

Instantly share code, notes, and snippets.

@CodeRecipez
CodeRecipez / operations_list_of_values.md
Last active December 15, 2015 13:08
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;
@CodeRecipez
CodeRecipez / operations_advanced_list_of_values.md
Last active December 15, 2015 13:08
Sass 101 - A newb's guide: Operations Advanced - 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.

On their own, lists don’t do much, but the [Sass list functions][list-function] make them useful. The [nth function][nth-function] can access items in a list, the [join function][join-function] can join multiple lists together, and the [append function][append-function] can add items to lists. The [@each rule][each-rule] can also add styles for each item in a list.

[Read more on lists][read-more] [list-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions [nth-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#nth-instance_method [join-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#join-instance_method [append-function]: http://sass-lang.com