リスト、配列系の関数のお話です。
リスト系関数
リストに対するあれやこれの関数をぺろろっとやってみます。
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])
2つのリストを一つに結合します。
第一引数のリストの最後に、第二引数のリストをそのまま結合する感じです。
第三引数は、結合後のリストの区切り指定を行うことができます。
.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; } */