stylusのmixin

sassからstylusにmixinを移植する時に、記法が違って少々ハマったのでメモ。

breakpointのmixin

変数格納用のファイルを用意しておく。

_valiables.styl

/*---------------------------------------------
* breakpoints
*---------------------------------------------*/
screen-sm = 768px
screen-md = 992px
screen-lg = 1200px

次は汎用的なmixin用のファイルを用意

_mixins.styl

breakpoint(bpName)
    for name in bpName
        if name == 'sm'
            @media only screen and (min-width: screen-sm)
                {block}
        if name == 'md'
            @media only screen and (min-width: screen-md)
                {block}
        if name == 'lg'
            @media only screen and (min-width: screen-lg)
                {block}
        if name == 'sm-up'
            @media only screen and (max-width: screen-sm)
                {block}
        if name == 'md-up'
            @media only screen and (max-width: screen-md)
                {block}
        if name == 'lg-up'
            @media only screen and (max-width: screen-lg)
                {block}

使ってみる

style.styl

.box
    width: 100%;
    +breakpoint(sm)
        width 100px
    +breakpoint(md)
        width 200px
    +breakpoint(lg)
        width 300px
    +breakpoint(lg-up)
        width 250px
    +breakpoint(md-up)
        width 150px
    +breakpoint(sm-up)
        width 50px

コンパイル結果

style.css

.box {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .box {
    width: 100px;
  }
}
@media only screen and (min-width: 992px) {
  .box {
    width: 200px;
  }
}
@media only screen and (min-width: 1200px) {
  .box {
    width: 300px;
  }
}
@media only screen and (max-width: 1200px) {
  .box {
    width: 250px;
  }
}
@media only screen and (max-width: 992px) {
  .box {
    width: 150px;
  }
}
@media only screen and (max-width: 768px) {
  .box {
    width: 50px;
  }
}

font-sizeをremに変換するmixin

style.styl

html
    font-size: 10px
    font-size 62.5%

_mixins.styl

font-size-px(prop, font_size)
    {prop}: unit(font_size, 'px')
    {prop}: unit(font_size / 10, 'rem')

上記のファイルに記述しておく。

使ってみる

style.styl

html
    font-size: 10px
    font-size 62.5%
// 追記
body
    font-size-px(font-size, 12)

コンパイル結果

style.css

html {
  font-size: 10px;
  font-size: 62.5%;
}
body {
  font-size: 12px; // rem非対応のブラウザ用
  font-size: 1.2rem;
}