HTML - SCSS - white-space をまとめて定義
1. 概要 このサイトには、べた書きで見せたい箇所がたくさんあるので、ホワイトスペースも1文字ずつ表示させて、改行も行末まできたらとしたいのです。 しかし、white-space の pre 定義は、方言やバージョンが多いので、1つのセレクタに定義するたびに white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; と書くのはつらいのです。 2. 定義 .scss では、下記のように書くことができます。 @mixin whiteSpace // ホワイト { white-space: pre; // CSS 2.0 white-space: pre-wrap; // CSS 2.1 white-space: pre-line; // CSS 3.0 white-space: -pre-wrap; // Opera 4-6 white-space: -o-pre-wrap; // Opera 7 white-space: -moz-pre-wrap; // Mozilla } pre { ・・・ @include whiteSpace(); // ホワイトスペースも1文字ずつ&改行 ・・・ } 3. コンパイル結果 結果は pre { ・・・ white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; ・・・ } となります。
white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap;
@mixin whiteSpace // ホワイト { white-space: pre; // CSS 2.0 white-space: pre-wrap; // CSS 2.1 white-space: pre-line; // CSS 3.0 white-space: -pre-wrap; // Opera 4-6 white-space: -o-pre-wrap; // Opera 7 white-space: -moz-pre-wrap; // Mozilla } pre { ・・・ @include whiteSpace(); // ホワイトスペースも1文字ずつ&改行 ・・・ }
pre { ・・・ white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; ・・・ }