作ったSassのFunction
ifの逆。「じゃなかったら...」って読んでたらunlessぅ。
@function unless($if, $do_when_true, $do_when_false) @return if(not($if), $do_when_true, $do_when_false)
// $num: 1em
$hoge: unless(unitless($num), ok, no)
swhich文みたいな。else ifって書くのが面倒臭かったから。
@function case($what, $do_when_eq) @each $v in $do_when_eq $this: nth($v, 1) $do : nth($v, 2) @if $what == $this @return $do @return null
// $num: 1em $hoge: case(unit($num), (px, pxの時返す) (em, emの時) (rem, remの時))
配列のタイプを変える。
- to_sl…スペース区切りのリストに
- to_cl…コンマ区切りのリストに
@function to_sl($list) @return join((), $list, space) // (1, 2, 3) -> (1 2 3) @function to_cl($list) @return join((), $list, comma) // (1 2 3) -> (1, 2, 3)
文字の結合。
- concat…add_strが1つ→後ろに付ける。2つ→1つ目を前、2つ目を後ろ付ける。
@function concat($original, $add_str) $len: length($add_str) @if $len == 1 @return $original + $add_str @else if $len == 2 $before_str: nth($add_str, 1) $after_str : nth($add_str, 2) @return $before_str + $original + $after_str
$pf: concat(webkit, '-' '-') // -webkit-
配列から取り去る。
- take…指定した値までの配列(スペース区切り)を返す
- drop…指定した値から最後までの配列(スペース区切り)を返す
@function take($list, $num) $result: () @for $i from 1 through $num $result: append($result, nth($list, $i)) @return $result @function drop($list, $num) $result: () @for $i from $num + 1 through length($list) $result: append($result, nth($list, $i)) @return $result
// $list: (1 2 3 4 5) take($list, 2) // -> (1 2) drop($list, 2) // -> (3 4 5)
- 0ならtrue
- 0じゃなかったらtrue
- nullならtrue nullならtrue
@function is_zero($num) @return if($num == 0, true, false) @function isnt_zero($num) @return unless($num == 0, true, false) @function is_null($any) @return if($any == null, true, false)
- 黒と混ぜ混ぜ
- 白と混ぜ混ぜ
@function bix($color, $add_black_per) @return mix(#000, $color, $add_black_per) @function wix($color, $add_white_per) @return mix(#fff, $color, $add_white_per)
// $color: 123456 bix($color, 10) // -> #102e4d wix($color, 10) // -> #294866
なんか配列関係
@function dyads($color) @return adjust-hue($color, 180deg) @function triad($color, $num) @return adjust-hue($color, 120 * $num * 1deg) @function tetrad($color, $num) @return adjust-hue($color, 90 * $num * 1deg) @function pentads($color, $num) @return adjust-hue($color, 72 * $num * 1deg) @function hexads($color, $num) @return adjust-hue($color, 60 * $num * 1deg)
// $color: 123456 triad($color, 1) // -> #561234 triad($color, 2) // -> #345612
スッキリさせたい時とか、忘れやすいコトとかはFunctionで作っちゃうといいね!