5. HTML - SCSS - クラス名の入れ子

 
5.1 なんとかしたいコード
5.2 SCSS の記述
5.3 コンパイル結果

5.1 なんとかしたいコード

 これを「クラス名の入れ子」などという言い方をしていいものかわかりませんが

table.list											/*	一覧
{
	text-align:  left;
	margin:	0px 40px;
	border: 2px solid;
}

table.list td
{
	line-height: $line_height_wide;
	border: $border_normal;
	padding: 5px 10px;
	border-collapse: collapse;						/*	線を重なり合わせる
}

table.list td.item									/*	中央寄せ
{
	text-align: center;
	font-family: monospace;							/*	等幅フォント
	font-weight: bold;								/*	太字
}

table.list td.iteml									/*	左寄せ
{
	text-align: left;
	font-family: monospace;
    font-weight: bold;
}

table.list td.itemr									/*	右寄せ
{
	text-align: right;
	font-family: monospace;
    font-weight: bold;
}
 てなコードがありまして(中身が中途半端に .scss になっちゃってますが)。  これをなんとかしたいと。

5.2 SCSS の記述

 これを .scss

table.list														//	一覧
{
	text-align:  left;
	margin:	0px 40px;
	border: 2px solid;

	td
	{
		line-height: $line_height_wide;
		border: $border_normal;
		padding: 5px 10px;
		border-collapse: collapse;								//	線を重なり合わせる
	}

	td.item														//	中央寄せ
	{
		text-align: center;
		font-family: monospace;									//	等幅フォント
		font-weight: bold;										//	太字
	}

	td.iteml													//	左寄せ
	{
		text-align: left;
		font-family: monospace;									//	等幅フォント
		font-weight: bold;										//	太字
	}

	td.itemr													//	右寄せ
	{
		text-align: right;
		font-family: monospace;									//	等幅フォント
		font-weight: bold;										//	太字
	}
}
 こう書けるようで・・・。  これは、親子関係がわかりやすい。

5.3 コンパイル結果

 コンパイルの結果がこうなります。

table.list {
  text-align: left;
  margin: 0px 40px;
  border: 2px solid;
}
table.list td {
  line-height: 120%;
  border: 1px solid #000000;
  padding: 5px 10px;
  border-collapse: collapse;
}
table.list td.item {
  text-align: center;
  font-family: monospace;
  font-weight: bold;
}
table.list td.iteml {
  text-align: left;
  font-family: monospace;
  font-weight: bold;
}
table.list td.itemr {
  text-align: right;
  font-family: monospace;
  font-weight: bold;
}