あると便利な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

_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

_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
    }
  }
}

使用例

_page.styl

.section{
  innerWidth(1000px,false)
}

レイアウト

inline-blockを利用した横並び配置

＊対象要素のみを含んだ親要素のセレクタで囲んだ状態で使用します。

mixin

_layout.styl

ibRowItem(){
  display inline-block
  letter-spacing normal

  ../{
    letter-spacing -.4em /* inline-blockに指定した子要素間の隙間を削除 */
  }
}

使用例

_page.styl

.row{

  .item{
    ibRowItem()
  }
}

html例

page.html

<ul class="row">
  <li class="item"></li>
  <li class="item"></li>
</ul>

floatを利用した配置

＊対象要素のみを含んだ親要素のセレクタで囲んだ状態で使用します。

mixin

_layout.styl

floatEl(floatDir = left){ /* 引数でfloatの方向を指定できる。引数なしの場合はleft */
  float floatDir

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

clearfix(){
  &::after {
    content ""
    display block
    clear both
  }
}

使用例

_page.styl

.block{

  .box{
    floatEl(right) /* 右にfloatする */
  }
}

html例

page.html

<div class="block">
  <div class="box"></div>
</div>

画像

背景画像を指定した要素の大きさ確保

*別途親要素に幅の設定が必要

mixin

_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に指定し高さを確保します。

_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には画像ディレクトリルートから対象の画像までのパスを指定します。

使用例

_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

_img.styl

fluid_img(){
  display block
  width 100%
}

使用例

_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