Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Discuss lists in the REFERENCE.

  • Loading branch information...
commit 6c2dc4d577621fd5f1133879de90edf4167cc274 1 parent 8385789
@nex3 nex3 authored
Showing with 52 additions and 0 deletions.
  1. +41 −0 doc-src/SASS_REFERENCE.md
  2. +11 −0 lib/sass/script/functions.rb
View
41 doc-src/SASS_REFERENCE.md
@@ -606,6 +606,7 @@ SassScript supports four main data types:
* strings of text, with and without quotes (e.g. `"foo"`, `'bar'`, `baz`)
* colors (e.g. `blue`, `#04a3f9`, `rgba(255, 0, 0, 0.5)`)
* booleans (e.g. `true`, `false`)
+* lists of values, separated by spaces or commas (e.g. `1.5em 1em 0 2em`, `Helvetica, Arial, sans-serif`)
SassScript also supports all other types of CSS property value,
such as Unicode ranges and `!important` declarations.
@@ -642,6 +643,40 @@ It's also worth noting that when using the [deprecated `=` property syntax](#sas
all strings are interpreted as unquoted,
regardless of whether or not they're written with quotes.
+#### Lists
+
+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 {file:Sass/Script/Functions.html#list-functions Sass list functions}
+make them useful.
+The {Sass::Script::Functions#nth nth function} can access items in a list,
+and the {Sass::Script::Functions#join join function} can join multiple lists together.
+
+In addition to containing simple values, lists can contain other lists.
+For example, `1px 2px, 5px 6px` is a two-item list
+containing the list `1px 2px` and the list `5px 6px`.
+If the inner lists have the same separator as the outer list,
+you'll need to use parentheses to make it clear
+where the inner lists start and stop.
+For example, `(1px 2px) (5px 6px)` is also a two-item list
+containing the list `1px 2px` and the list `5px 6px`.
+The difference is that the outer list is space-separated,
+where before it was comma-separated.
+
+When lists are turned into plain CSS, Sass doesn't add any parentheses,
+since CSS doesn't understand them.
+That means that `(1px 2px) (5px 6px)` and `1px 2px 5px 6px`
+will look the same when they become CSS.
+However, they aren't the same when they're Sass:
+the first is a list containing two lists,
+while the second is a list containing four numbers.
+
+It's not possible to have a list with zero elements in Sass.
+
### Operations
All types support equality operations (`==` and `!=`).
@@ -850,6 +885,12 @@ is compiled to:
SassScript supports `and`, `or`, and `not` operators
for boolean values.
+#### List Operations
+
+Lists don't support any special operations.
+Instead, they're manipulated using the
+{file:Sass/Script/Functions.html#list-functions list functions}.
+
### Parentheses
Parentheses can be used to affect the order of operations:
View
11 lib/sass/script/functions.rb
@@ -113,6 +113,17 @@ module Sass::Script
# \{#abs abs($value)}
# : Returns the absolute value of a number.
#
+ # ## List Functions {#list-functions}
+ #
+ # \{#length length($list)}
+ # : Returns the length of a list.
+ #
+ # \{#nth nth($list, $n)}
+ # : Returns a specific item in a list.
+ #
+ # \{#join join($list1, $list2, \[$separator\])}
+ # : Joins together two lists into one.
+ #
# ## Introspection Functions
#
# \{#type_of type-of($value)}
Please sign in to comment.
Something went wrong with that request. Please try again.