[Bootstrap] &self: &; @mixin 사용 scss

 

👩🏻 알고 싶은 코드

.navigation {
	$self: &;

	@mixin menu-item-visible($count) {
		.navigation.navigation-menu .navigation-item-more .navigation &:nth-child(-n + #{$count}),
		.navigation.navigation-menu > &:nth-child(n + #{$count + 1}) {
			display: none;
		}

		// stylelint-disable selector-max-specificity
		// stylelint-disable selector-max-class
		.navigation.navigation-menu > &.navigation-item-more {
			display: none;
			&:nth-child(n + #{$count + 2}) {
				display: list-item;
			}
		}
		// stylelint-enable selector-max-specificity
		// stylelint-enable selector-max-class
	}

	padding: 0;
	margin: 0;
	list-style: none;

 

❓ $self: &; 쓰는 이유?

 

@mixin 안쪽에서 현재 선택자 .navigation을 명시적으로 써야 할 일이 있는데, scss에서는 &를 mixin 내부에서 바로 사용할 수 없을 때가 있어서 바깥의 &(상위 선택자)를 $self 변수에 저장해두고 mixin안에서 사용

 

=> 현재 $self == '.navigation' 를 가리킨다.

 

📚 해석

& 자리에 $self 즉, .navigation을 넣는 것

 

간단한 예시)

.navigation {
  $self: &;

  .wrapper #{$self} { // 즉, .wrapper .navigation 이 됨
  }
}

 

👩🏻 알고 싶은 코드 예시)

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

  @mixin menu-item-visible($count) {
    .navigation.navigation-menu .navigation-item-more .navigation &:nth-child(-n + #{$count}),
    .navigation.navigation-menu > &:nth-child(n + #{$count + 1}) {
      display: none;
    }

    .navigation.navigation-menu > &.navigation-item-more {
      display: none;

      &:nth-child(n + #{$count + 2}) {
        display: list-item;
      }
    }
  }
}

를 하단처럼 사용했을 때 ($count를 5라고 가정)

.navigation {
  $self: &;

  @include menu-item-visible(5);
}

일 때 컴파일되면 나오는 css 👇

.navigation.navigation-menu .navigation-item-more .navigation .navigation:nth-child(-n + 5),
.navigation.navigation-menu > .navigation:nth-child(n + 6) {
  display: none;
}

.navigation.navigation-menu > .navigation.navigation-item-more {
  display: none;
}

.navigation.navigation-menu > .navigation.navigation-item-more:nth-child(n + 7) {
  display: list-item;
}

 

 

❗❗ 이와 같이 @include menu-item-visible(숫자) 이렇게 호출해야지만 작동하는 scss mixin 코드!