mixin for stylus
(補足) stylusを入れる時こいつを入れてやると強い http://kouto-swiss.io/
stylusの独自関数で結構使えるやつがある。ので、そいつらをつど使っていくと良い http://stylus-lang.com/
/**
* 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編 その1
*/
abs-center-1()
absolute top right left bottom
margin auto
zindex(name)
z-index: index($layer, name) + 1