sass で色々作るときの mixin ライブラリ

_.lib.sass

// デバッグ用
@mixin area
  background: rgba(255,0,0,0.5)
// 座標指定
@mixin pos($top,$left)
  position:absolute
  top: #{$top}px
  left: #{$left}px
@mixin pos_tl($top,$left)
  position:absolute
  top: #{$top}px
  left: #{$left}px
@mixin pos_tr($top,$right)
  position:absolute
  top: #{$top}px
  right: #{$right}px
@mixin pos_bl($bottom,$left)
  position:absolute
  bottom: #{$bottom}px
  left: #{$left}px
@mixin pos_br($bottom,$right)
  position:absolute
  bottom: #{$bottom}px
  right: #{$right}px
// サイズ
@mixin size($width,$height)
  @if $width != auto
    @if unitless($width)
      $width: 1px * $width
  @if $height != auto
    @if unitless($height)
      $height: 1px * $height
  width: $width
  height: $height
@mixin halfSize($width,$height)
  $width: $width / 2
  $height: $height / 2
  @if $width != auto
    @if unitless($width)
      $width: 1px * $width
  @if $height != auto
    @if unitless($height)
      $height: 1px * $height
  width: $width
  height: $height
// 左右中央寄せ
@mixin center
  margin-left: auto
  margin-right: auto
// 親要素に対して縦横100%のボックス
@mixin fit_block
  display: block
  width: 100%
  height: 100%

// 背景画像
@mixin bg($url,$size)
  background-image: url("#{$url}#{$version}")
  background-size: $size
@mixin bgPos($x,$y)
  @if unitless($x)
    $x: 1px * $x
  @if unitless($y)
    $y: 1px * $y
  background-position: $x $y
// open & close
@mixin openClose
  visibility: hidden
  pointer-events: none
  &.open
    visibility: inherit
    pointer-events: all
  &.close
    visibility: hidden
    pointer-events: none
// on & off
@mixin onOff
  &.on
    display: block
  &.off
    pointer-events: none
    display: none