読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

作った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で作っちゃうといいね!