sass 縦書き用のmixin

縦書き用のmixin

$set_prefix: -webkit-, -moz-, -ms-, -o-, '';
//writing-mode
@mixin writing-mode( $direction ) {
	@each $prefix in $set_prefix {
		@if $direction == 'initial'{//無効化したいときを追加
			#{$prefix}writing-mode:initial;
		} @else{
			@if $prefix == '-ms-'{
				#{$prefix}writing-mode: tb- + $direction;
			} @else {
				#{$prefix}writing-mode: vertical- + $direction;
			}
		}
	}
}

//使用時
@include writing-mode(rl);
@include writing-mode(initial);

※firefoxで li に style writing-mode(rl) を使用したとき、横幅が広がってしまっていた。
原因を突き止めてはいないがwidthを指定することで回避できる。