HTML - SCSS - white-space をまとめて定義

1.　概要

2.　定義

3.　コンパイル結果

1.　概要

　このサイトには、べた書きで見せたい箇所がたくさんあるので、ホワイトスペースも１文字ずつ表示させて、改行も行末まできたらとしたいのです。

　しかし、white-space の 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;


　と書くのはつらいのです。

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();												//	ホワイトスペースも１文字ずつ＆改行

	・・・
}


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;

  ・・・
}


　となります。