3. HTML - SCSS - 変数

 
3.1 前提
3.2 変数
3.3 入れ子の記述
3.4 結果

3.1 前提

 .scss では、変数を使えるのです。これは都合がよい。  もとの .css で

body
{
	width: 100%;
	margin: 20px 0px 80px 0px;
	background-color: #F8FFF8;
	line-height: 110%;
	color:       #333344;
	position: relative;

	font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif;
}

@media all and (max-device-width: 600px)
{
	body
	{
		margin: 5px 5px;
		background-color: #F8FFF8;
	    line-height: 110%;
	    color:       #333344;
	    position: static;
		font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif;
	}
}
 というような記述をしているわけです。  画面のサイズによって <body>~</body> を書き分けているわけです。  background-color や line-height 等に同じ記述をしているのです。  これは冗長ですね。これ以降も出て来るので変数化したい。  また、body を2回書いていて、同じ記述が複数あるわけです。  これも1度で記述したい。

3.2 変数

 .scss では変数を使えます。  以下のように書けるわけです。

$normal_bg_color: #F8FFF8;
$normal_line_height: 110%;
$normal_text_color: #333344;

body
{
	width: 100%;
	margin: 20px 0px 80px 0px;
	background-color: $normal_bg_color;
	line-height: $normal_line_height;
	color:       $normal_text_color;
	position: relative;

	font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif;
}

@media all and (max-device-width: 600px)
{
	body
	{
		margin: 5px 5px;
		background-color: $normal_bg_color;
	    line-height:  $normal_line_height;
	    color:        $normal_text_color;
	    position: static;
		font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif;
	}
}

3.3 入れ子の記述

 @media ってのをメディアセレクタというらしいですが、.css では、メディアセレクタごとにセレクタを書く必要があるわけです。  .scss は、セレクタを入れ子にできるとのことで

$normal_bg_color: #F8FFF8;
$normal_line_height: 110%;
$normal_text_color: #333344;

body
{
	width: 100%;
	margin: 20px 0px 80px 0px;
	background-color: $normal_bg_color;
	line-height: $normal_line_height;
	color:       $normal_text_color;
	position: relative;

	font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif;

	@media all and (max-device-width: 600px)
	{
		margin: 5px 5px;
	    position: static;
	}
}
 と書けるはず。

3.4 結果

 上記の .scss をコンパイルした結果です。

body {
  width: 100%;
  margin: 20px 0px 80px 0px;
  background-color: #F8FFF8;
  color: #333344;
  line-height: 110%;
  position: relative;
  font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'MS ゴシック', sans-serif;
}
@media all and (max-device-width: 600px) {
  body {
    margin: 5px 5px;
    position: static;
  }
}
 意図通りの結果が得られました。