[SASS] 태그 중첩 사용

HTML

    <div class="banner-header">
          <a href="#"><img src="img/logo.png" alt="로고" /></a>
          <div class="hamburger_menu">
            <span></span><span></span><span></span>
          </div>
        </div>

햄버거 메뉴 만들기에서

span 태그에 css 넣고 싶을 경우

SCSS

.banner-header {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 90px;
  .hamburger_menu {
    width: 80px;
    height: 65px;

    // span 태그에 스타일 적용
    span {
      display: block;
      height: 10px;
      background-color: $main_color;
      margin: 15px 0;
      transition: all 0.3s ease;
      border-radius: 10px;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

.banner-header 안에

.hamburger-menu 가 있으므로 안에 써 주고,

 

또 그 안에 span 태그가 있으므로

.hamburger-menu 안에다가도 span 태그를 사용해줬다

 

그리고 &를 사용해서

span 태그를 참조 해줌.