吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

ネスト(入れ子)

2014年2月26日 / category : reference-sass, sass

Sassの中で一番使用すると思われるネスト(入れ子)

Sass
#main{
	margin:15px;
	dl{
		border:1px solid #ccc;
		dt{
			font-size:14px;
			font-weight:bold;
			line-height:28px;
		}
		dd{
			font-size:12px;
			line-height:18px;
		}
	}
}
CSS – コンパイル後
#main {
  margin: 15px;
}
#main dl {
  border: 1px solid #ccc;
}
#main dl dt {
  font-size: 14px;
  font-weight: bold;
  line-height: 28px;
}
#main dl dd {
  font-size: 12px;
  line-height: 18px;
}