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

@import : インポートについて

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

Sassでも外部Sassファイルのインポートすることができます。読み込む際は、拡張子を省略することができます。

@import ‘sassファイル’;
という書式で記述する(CSSのインポートと同じ)

Sass
@import '_config';

p{
	font-size: $fontSize;
}
Sass (_config.scss)
$fontSize: 12px;

header{
	width: 960px;
}

footer{
	width: 960px;
}
CSS – コンパイル後
header {
	width: 960px;
}

footer {
	width: 960px;
}

p {
	font-size: 12px;
}

複数のsassファイルをインポートする場合、
@import ‘sassファイル’, ‘sassファイル’, ‘sassファイル’;
という書式で記述する

Sass
@import '_colorA', '_colorB', '_colorC';
Sass (_colorA.scss)
.colorA{
	color: #f00;
}
Sass (_colorB.scss)
.colorB{
	color: #0f0;
}
Sass (_colorC.scss)
.colorC{
	color: #00f;
}
CSS – コンパイル後
.colorA {
	color: #f00;
}

.colorB {
	color: #0f0;
}

.colorC {
	color: #00f;
}

@importをネストすることもできます。

Sass
div{
	border: 1px solid #f00;
	@import '_item';
}
Sass (_item.scss)
.item{
	margin: 0;
	padding: 0;

	span{
		color: #000;
		font-size: 12px;
		line-height: 1.5;
	}

}
CSS – コンパイル後
div {
	border: 1px solid #f00;
}
div .item {
	margin: 0;
	padding: 0;
}
div .item span {
	color: #000;
	font-size: 12px;
	line-height: 1.5;
}