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