Sass Lists

Watch "Creating list elements" on LinkedIn Learning

Lists, like arrays in JavaScript, are a sequence of values. The elements in a list can be separated by commas or by spaces, while brackets are not required. Because lists are in fact used all the time in CSS, Sass list are often indistinguishable.

// a list of fonts
$font-family: Helvetica, Arial, sans-serif;

// a list of border radius
$border-radius: 0px 20px 0px 20px;

body {
  font-family: $font-family;
}

box {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  border-radius: $border-radius;
}

Access an Element

Elements within a list are reference by their indexes. However, unlike arrays in many other programming languages, the index 1 indicates the first element of the list. Negative numbers can be used for indexes as well, with -1 referring to the last element in the list. The nth() function can be used to access element of a list by it's index.

NOTE

In October 2019, Sass introduced its new modules system with Build-In Modules, which will eventually replace the older global functions. While we will continue to use the global function for now, it important to note that the Sass team has started discouraging their use and will be deprecating them in the near future.

// a list of fonts
$font-family: Helvetica, Arial, sans-serif;

// a list of border radius
$border-radius: 0px 20px 0px 20px;

// getting the first font
$first-font: nth($font-family, 1);

// getting the last border radius
$last-radius: nth($border-radius, -1);

body {
  font-family: $first-font;
}

box {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  border-radius: $last-radius;
}

Try it yourself on Sassmeister