- #{ $변수(문자) }를 사용하여 표기한다.
- 삽입된 $변수(문자)를 그대로 적용시켜 연산이 되지 않게 한다.
- @mixin, @import, 일반적인 Sass 문법 등 변수나 문자를 통해 가변적인 값들을 적용하는 경우 사용
/* SCSS */
@each $flower in (violet, sunflower, rose){
.#{$flower }{
background:url('../images/' + $flower + '.jpg') no-repeat 0 0;
}
}
/* CSS */
.violet {
background: url("../images/violet.jpg") no-repeat 0 0;
}
.sunflower {
background: url("../images/sunflower.jpg") no-repeat 0 0;
}
.rose {
background: url("../images/rose.jpg") no-repeat 0 0;
}