HTML - SCSS - 変数


 　クラウディア
1.　前提
2.　変数
3.　入れ子の記述
4.　結果 
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', 'ＭＳ ゴシック', 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', 'ＭＳ ゴシック', sans-serif;
	}
}



　というような記述をしているわけです。

　画面のサイズによって <body>～</body> を書き分けているわけです。

　background-color や line-height 等に同じ記述をしているのです。
　これは冗長ですね。これ以降も出て来るので変数化したい。

　また、body を２回書いていて、同じ記述が複数あるわけです。
　これも１度で記述したい。


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', 'ＭＳ ゴシック', 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', 'ＭＳ ゴシック', sans-serif;
	}
}




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', 'ＭＳ ゴシック', sans-serif;

	@media all and (max-device-width: 600px)
	{
		margin: 5px 5px;
	    position: static;
	}
}



　と書けるはず。


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', 'ＭＳ ゴシック', sans-serif;
}
@media all and (max-device-width: 600px) {
  body {
    margin: 5px 5px;
    position: static;
  }
}



　意図通りの結果が得られました。
earthcar（アースカー）