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;

  ・・・
}
 となります。