sass를 사용하여 웹카페 만들기

🧷 @at-root

@at-root - 태그 안에 사용하더라도 css로 컴파일 할 때 태그 안에 선언되는게 아닌 그 밖에 따로 선언될 수 있게 도와줌 / 가독성 ⬆️ , 중첩도 ⬇️

🧷 @each

@each colors

$colors: (
// var 별칭을 사용하여  map.key에 value 할당
  "Book": var.$green,
  "News": var.$yellow,
  "Board": var.$brown,
  "Favorite": var.$orange,
  "Twitter": var.$blue,
);
// @each문을 활용하여 각각 선언하지 않고 컴파일될 때 css파일에 선언되게 하는 구문
@each $section, $color in $colors {
  .accent#{$section} {
    color: $color;
  }
}

@each문을 사용하여 반복 작업을 단순화 시킬 수 있다.
다음과 같은 결과가 나타난다.

.accentBook {
  color: #abd375;
}

.accentNews {
  color: #e8ca58;
}

.accentBoard {
  color: #988574;
}

.accentFavorite {
  color: #eea60a;
}

.accentTwitter {
  color: #6aaee6;
}

@each sprite

// sprite 배경이미지
.sprite {
  min-height: rem(60px);
  background-image: url(./../assets/images/sprite_main.png);
  background-repeat: no-repeat;
  padding-left: rem(64px);

  $sprites: Book, Board, News, Favorite, Twitter;
  $x: 0;
  $y: 0;
  @each $sprite in $sprites {
  //&는 상위 태그인 sprite를 의미
    &#{$sprite} {
      background-position: $x $y;
    }
    //반복 실행할 때마다 $y 값을 -115px만큼 더해 $y값 변경
    $y: $y - 115px;
  }
}