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を指定することで回避できる。