リスト、配列系の関数のお話です。

リスト系関数

リストに対するあれやこれの関数をぺろろっとやってみます。

length($list)

リストの要素数を返します。

.example {
  property: length(10px auto);
  property: length(15px);
  property: length(1px solid white);
}
/*
.example {
  property: 2;
  property: 1;
  property: 3;
}
*/

nth($list, $n)

リストのn番目の値を返します。

.example {
  property: nth(10px auto, 1);
  property: nth(1px 2px 5px 10px, 3);
  property: nth(1px solid white, 3);
}

/*
.example {
  property: 10px;
  property: 5px;
  property: white;
}
*/

join($list1, $list2, [$separator])

２つのリストを一つに結合します。
第一引数のリストの最後に、第二引数のリストをそのまま結合する感じです。
第三引数は、結合後のリストの区切り指定を行うことができます。

.example {
  property: join(10px, 5px);
  property: join(1px 2px 5px , 30%);
  property: join(0 10 255, 0.5, comma);
  property: join(0 10 255, 0.5, space);
}

/*
.example {
  property: 10px 5px;
  property: 1px 2px 5px 30%;
  property: 0, 10, 255, 0.5;
  property: 0 10 255 0.5;
}
*/

append($list1, $val, [$separator])

リストの最後に単一値を追加します。
第三引数は、結合後のリストの区切り指定を行うことができます。

$font: arial, helvetica;
.example {
  font-family: append($font, sans-serif, comma);
}
/*
.example {
  font-family: arial, helvetica, sans-serif;
}
*/

zip($list1, $list2, c)

複数のリストを、一つの多次元リストに統合します。
リスト全て同じ要素数である必要があります。
エラーにはなりませんが、数が足りない場合その部分は除外されます。

$shadow_x: 0 1px 5px;
$shadow_y: 1px 3px -5px;
$shadow_grd: 3px 5px 33px;
$shadow_color: #222 white red;
.example {
  text-shadow: zip($shadow_x, $shadow_y, $shadow_grd, $shadow_color);
}
/*
.example {
  text-shadow: 0 1px 3px #222222, 1px 3px 5px white, 5px -5px 33px red;
}
*/

/*
$shadow_x[0] = 0;
$shadow_x[1] = 1px;
$shadow_x[2] = 5px;
 
$shadow_y[0] = 1px;
$shadow_y[1] = 3px;
4shadow_y[2] = -5px;

$shadow_grd[0] = 3px;
$shadow_grd[1] = 5px;
$shadow_grd[2] = 33px;

$shadow_color[0] = #222;
$shadow_color[1] = white;
$shadow_color[2] = red;

が
zipすることにより
 
$shadow_x[0] $shadow_y[0] $shadow_grd[0] $shadow_color[0]
$shadow_x[1] $shadow_y[1] $shadow_grd[1] $shadow_color[1]
$shadow_x[2] $shadow_y[2] $shadow_grd[2] $shadow_color[2]

の組み合わせに変わる事になります。

$shadow_x[0] $shadow_y[0] $shadow_grd[0] $shadow_color[0]
$shadow_x[1] $shadow_y[1] $shadow_grd[1] $shadow_color[1]
$shadow_x[2] $shadow_y[2] $shadow_grd[2]

こんなデータ構造になってしまった場合は

$shadow_x[0] $shadow_y[0] $shadow_grd[0] $shadow_color[0]
$shadow_x[1] $shadow_y[1] $shadow_grd[1] $shadow_color[1]
のみが有効となり、[2]のグループは戻り値として戻ってきません。
*/

index($list, $value)

リストの中のある値を見つけ出しそのインデックスを返します。値がない場合はfalseを返します。

.example {
  property: index(1px 0 3px white, white);
  property: index(5px 10px 15px, 20px);
}
/*
.example {
  property: 4;
  property: false;
}
*/