sassからstylusに移行してみた

stylusでもsassで出来ることは大体できるのと、記述が楽になるのでstylus使いましょうって社内で言ってみたら通ったので、sassからstylusに移行してみた。

変数の書き方が若干異なり、そこで少しハマったのでメモ。

nib

stylusのライブラリで、これを@importしておけばデフォルトでmixinが色々使うことができる

mixin

cleafix

nibのclearfixの書き方が若干古いので書き換える

mixins.styl

 clearfix()
    +cache('clearfix')
        &:after
            content ''
            display block
            clear both

usage

ul.list
    clearfix()

font-size

pxをremに変換するmixin

mixins.styl

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

usage

font-size-px(font-size, 16)

breakpoint

mixins.styl

// breakpoint valiables
$screen-xs = 544px
$screen-sm = 768px
$screen-md = 992px
$screen-lg = 1200px

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

usage

.box
    width 100px
    +breakpoint(xs)
        width 150px
    +breakpoint(sm)
        width 200px
    +breakpoint(md)
        width 300px
    +breakpoint(lg)
        width 700px