[Bootstrap] $self: &; 중첩 구조에서의 사용 #{$self}

앞에서 봤을 땐 mixin 문법에서 사용하기 위해 $self: &를 사용한다고 했는데, 

여기서도 사용하고 있어서 봤더니

중첩 구조라서 확실하게 가져오기 위해 사용한다고 한다.

 

원본 SCSS

.navigation {
  $self: &; // → '.navigation'

  &-menu {
    #{ $self } {
      // 여긴 '.navigation-menu .navigation'이 됨
    }

    #{ $self }-link-extra {
      // 여긴 '.navigation-menu .navigation-link-extra'가 됨
    }
  }
}

 

컴파일 된 CSS

.navigation-menu .navigation {
  /* ... */
}

.navigation-menu .navigation-link-extra {
  /* ... */
}

 

  👩🏻  

=> 즉, 내가 이해하기로는 js 처럼 변수명을 할당해서 똑같은 글자를 줄이는 것

=> 위코드에서 봤을 땐 &-menu 안에서 &를 쓰면 .navigation-memu를 가져오기 때문에 .navigation을 가져오기 위해

#{ $self  }를 사용!

 

장점: 클래스명 변경시 한번에 변경 가능~

 

 

 

📌 #{ } 란?

=> SCSS에서 #{}는 문자열 안에서 변수 값을 넣을 때 사용하는 문자열 인터폴레이션(string interpolation) 방식

 

예시)

$color-name: "info";

.btn-#{$color-name} {
  color: blue;
}

👇👇👇 컴파일 된 css 👇👇👇

.btn-info {
  color: blue;
}

 

 

👩🏻 문법이니 #{ } 안에 넣어야 인식한다고 생각하면 될 듯