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

変数のインターポレーション(補充)について

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

変数をいろんな要素で使用することができます。

変数をタグやクラス名(id名)、または複数のクラス名(id名)として使用する記述方法

Sass
$div: '.box';
$divs: '.box, .txt, .list';
$tag: 'p';

#{$div}{
	margin: 0;
}

#{$divs}{
	padding: 0;
}

#{$tag}{
	font-size: 12px;
	line-height: 18px;
}
CSS – コンパイル後
.box {
  margin: 0;
}

.box, .txt, .list {
  padding: 0;
}

p {
  font-size: 12px;
  line-height: 18px;
}

変数を文字列の一部として使用する記述する方法

Sass
$img_path: '../img/';

.img{
	background-image: url(#{$img_path}photo.jpg);
}
CSS – コンパイル後
.img {
  background-image: url(../img/photo.jpg);
}

変数をスタイルのプロパティとして使用する記述方法

Sass
$margin: 'margin';

p{
	#{$margin}:0;
}
CSS – コンパイル後
p {
  margin: 0;
}