mio-U-M
2/22/2020 - 5:05 PM

mixin for stylus

mixin for stylus

(補足) stylusを入れる時こいつを入れてやると強い http://kouto-swiss.io/

stylusの独自関数で結構使えるやつがある。ので、そいつらをつど使っていくと良い http://stylus-lang.com/

_mixin.styl
content_copyfile_download
/**
 * PC表示の時にのみ適用。
 */
pc-layout()
  @media (min-width $pc_min_width)
    {block}

/**
 * SP表示の時にのみ適用。
 */
sp-layout()
  @media (max-width ($pc_min_width - 1))
    {block}

/**
 * image以外の背景画像テンプレート。
 */
bg-style($position = center center, $repeat = no-repeat, $size = cover)
    background-position $position
    background-repeat $repeat
    background-size $size

/**
 * image用の背景画像テンプレート。
 */
fixed-bg-style($width, $height)
  width $width
  height $height
  bg-style()

/**
 * 背景画像テンプレート。
 */
bg($path, $position = center center, $repeat = no-repeat, $size = cover)
    $url = $img_dir_for_url + $path
    bg-style($position, $repeat, $size)
    background-image url($url)

/**
 * width/heightも設定してくれる。
 * 背景画像欲張りmixin。
 */
img($path, $scale = 1.0)
    $size = img-size($path)
    $width = $size[0] * $scale
    $height = $size[1] * $scale
    bg($path)
    max-size $width $height
    min-size $width $height
    size $width $height

/**
 * デザインのサイズを元に、vw指定してくれるの背景画像mixin。
 * variableのDESIGN SIZEを確認！
 * @param {String} パス
 * @param {String} UA
 */
dynamic-img($path, $ua = 'pc', $scale = 1.0)
    $baseSize = $ua == 'pc' ? $pc_design_width : $sp_design_width
    $size = img-size($path)
    $ratio = ($size[0] / $baseSize) * 101
    $width = unit($ratio * $scale, 'vw')
    $height =  dynamic-height($path, $ratio * $scale)
    bg($path)
    max-size $width $height
    min-size $width $height
    size $width $height

/**
 * さらに欲張る背景画像mixin。
 * 一度にPCとSP両方とも設定できる。
 */
various-img($path, $pc = $pc_scale, $sp = $sp_scale)
    +pc-layout()
        img($path, $pc)
    +sp-layout()
        img($path, $sp)

/**
 * button/inputとかをresetします。
 */
reset-style()
    appearance none
    background-color transparent
    border none
    display block
    margin 0
    outline none
    padding 0

/**
 * テキストを画像で配置するときの優しさです。
 */
worry-style()
    span
        display none

/**
 * PC時のみ、hoverで半透明にします。
 */
hover-style()
    cursor pointer
    position relative
    +pc-layout()
        transition opacity 500ms ease 0ms
        &:hover
            opacity 0.5

/**
 * 擬似要素につけたいセットです。
 */
pseudo-style()
    content ""
    display block

/**
 * 絶対固定width。
 */
fixedWidth($width)
    max-width $width
    min-width $width
    width $width

/**
 * 絶対固定height。
 */
fixedHeight($height)
    height $height
    max-height $height
    min-height $height

/**
 * marginのショートハンド代わり。
 */
quick-margin($top = 0, $bottom = 0, $left = 0, $right = 0)
    margin $top $right $bottom $left

/**
 * paddingのショートハンド代わり。
 */
quick-padding($top = 0, $bottom = 0, $left = 0, $right = 0)
    padding $top $right $bottom $left

/**
 * 中央配置：flex編
 */
flex-center()
  display: flex;
  justify-content: center;
  align-items: center;


/**
 * 中央配置：absolute編 その１
 */
abs-center-1()
  absolute top right left bottom
  margin auto

zindex(name)
  z-index: index($layer, name) + 1