あると便利なstylusのmixin

個人的に使用頻度が高いcssプロパティの組み合わせを
stylusでmixin化しました。
思いつき次第追加していきます。

#メディアクエリ
##block mixin
```
SP_MAX = 768px /* breakpointになる値を設定 */

sp(){
  @media screen and (max-width: SP_MAX) {
    {block}
  }
}
```
##使用例
```
.element{
  display inline-block

  +sp(){
    display block
  }
}
```

#サイズ
##スマホ版幅指定（レスポンシブ対応用）
###mixin
```stylus:_size.styl
/* デザイン全体のpx数 */
SP_DESIGN_W = 750

/* ブラウザ幅によって要素の幅を変えたい場合 */
sp_calc_vw(width){
  (width/SP_DESIGN_W) * 100vw
}

/* pxで固定の幅になる場合 */
sp_calc_px(width){
  (width/2)px /* 2倍サイズでデザインしたため2で割る */
}

/* 幅指定のある直近の祖先要素によって対象の幅を変えたい場合 */
sp_calc_per(width){
  (width/SP_DESIGN_W) * 100%
}
```
##PC/SPでコンテンツ幅を切り替える
###mixin
```stylus:_size.styl
innerWidth(pc_w = PC_MIN,sp_padding = true){
  width pc_w

  if sp_padding == true{
    +sp(){
      width sp_calc_vw(690)
      padding-right sp_calc_vw(30)
      padding-left sp_calc_vw(30)
    }
  } else {
    +sp(){
      width 100%
      padding-right 0
      padding-left 0
    }
  }
}
```
###使用例
```stylus:_page.styl
.section{
  innerWidth(1000px,false)
}
```

#レイアウト
##inline-blockを利用した横並び配置
＊対象要素のみを含んだ親要素のセレクタで囲んだ状態で使用します。
###mixin
```stylus:_layout.styl
ibRowItem(){
  display inline-block
  letter-spacing normal

  ../{
    letter-spacing -.4em /* inline-blockに指定した子要素間の隙間を削除 */
  }
}
```
###使用例
```stylus:_page.styl
.row{

  .item{
    ibRowItem()
  }
}
```
###html例
```html:page.html
<ul class="row">
  <li class="item"></li>
  <li class="item"></li>
</ul>
```
##floatを利用した配置
＊対象要素のみを含んだ親要素のセレクタで囲んだ状態で使用します。
###mixin
```stylus:_layout.styl
floatEl(floatDir = left){ /* 引数でfloatの方向を指定できる。引数なしの場合はleft */
  float floatDir

  ../{
    clearfix() /* 親要素のafter擬似要素でfloatを解除する */
  }
}

clearfix(){
  &::after {
    content ""
    display block
    clear both
  }
}
```
###使用例
```stylus:_page.styl
.block{

  .box{
    floatEl(right) /* 右にfloatする */
  }
}
```
###html例
```html:page.html
<div class="block">
  <div class="box"></div>
</div>
```
#画像
##背景画像を指定した要素の大きさ確保
*別途親要素に幅の設定が必要
###mixin
```stylus:_img.styl
bgImg_setSize(img_width,img_height,fluid = true){
  display inline-block

  if fluid is true{
    width 100%
    padding-top (img_height/img_width)*100%
  } else {
    width (img_width)px
    padding-top (img_height)px
  }
  
  height 0
  font-size 0
  background-repeat no-repeat
}
```
`bgImg_setSize`の`fluid`引数を`true`にした場合、
`img_width`:画像の実際の幅(px)
`img_height`:画像の実際の高さ(px)
を引数とすることで画像の比率を計算し`padding-top`に指定し高さを確保します。

```stylus:_img.styl
PATH_TO_IMGDIR = '../img/'
bgImg_setPath(img_path,bgSize = contain){
  background-image url(PATH_TO_IMGDIR + img_path)
  background-size bgSize
}
```
`PATH_TO_IMGDIR`には生成されたcssファイルから画像ディレクトリへの相対パス、
`img_path`には画像ディレクトリルートから対象の画像までのパスを指定します。
###使用例
```stylus:_page.styl
.img_wrap{
  width 300px

  +sp(){
    width sp_calc_vw(600)
  }

  .img{
    bgImg_setPath('img_file/img_name.png')
    bgImg_setSize(300,100)
  }
}
```
###html例
```
<div class="img_wrap">
  <p class="img"></p>
</div>
```
##親要素の大きさにフィットさせたいimgタグ
*別途親要素に幅の設定が必要
###mixin
```stylus:_img.styl
fluid_img(){
  display block
  width 100%
}
```
###使用例
```stylus:_page.styl
.img_wrap{
  width 300px

  .img{
    fluid_img()
  }
}
```
###html例
```
<p class="img_wrap">
  <img class="img" src="./img/img_file/img_name.png">
</p>
```

#参考
Mixins — Stylus
http://stylus-lang.com/docs/mixins.html