HTML - SCSS - white-space をまとめて定義
- 1. 概要
- 2. 定義
- 3. コンパイル結果
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;
・・・
}
となります。
|
|