프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

DEV

[ sass] Interpolation 보간 @each .. in

2024.05.28
북마크 작성자 정보

- #{ $변수(문자) }를 사용하여 표기한다. 

- 삽입된 $변수(문자)를 그대로 적용시켜 연산이 되지 않게 한다.

- @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;
}

이 포스트 공유하기

답글쓰기 전체목록