selection()

선택 영역(Selection) 믹스인

용도

선택 영역(::selection) 스타일을 설정하는 믹스인입니다.

사용법

selection() 믹스인을 실행하고, 스타일 콘텐츠를 중괄호 안에 입력합니다.

selection($selector:string) { @content; }

@include selection() {
  color: get-color(white);
  background-color: get-color(black);
}

@include selection('img, button') {
  color: get-color(black);
  background-color: transparent;
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$selector	string		null

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

::-moz-selection {
  color: #fefefe;
  background-color: #010101;
}

::selection {
  color: #fefefe;
  background-color: #010101;
}

img::-moz-selection {
  color: #010101;
  background-color: transparent;
}

img::selection {
  color: #010101;
  background-color: transparent;
}

button::-moz-selection {
  color: #010101;
  background-color: transparent;
}

button::selection {
  color: #010101;
  background-color: transparent;
}

로직

selection() 믹스인은 다음의 로직에 의해 작성되었습니다.

@mixin selection($selector: null) {
  @if $selector == null {
    ::-moz-selection {
      @content;
    }
    ::selection {
      @content;
    }
  } @else {
    @each $selector in str-split($selector, ',') {
      #{$selector}::-moz-selection {
        @content;
      }
      #{$selector}::selection {
        @content;
      }
    }
  }
}

1. 전달 받은 값이 없을 경우, 모든 요소에 ::selection 스타일 설정

2. 외부로부터 전달 받은 콘텐츠(@content) 코드 출력

3. 전달 받은 값이 있을 경우, 선택자 문자 값을 구분 기호로 나눠 리스트로 처리

4. 리스트를 순환하여 개별 선택자에 ::selection 스타일 설정

5. 외부로부터 전달 받은 콘텐츠(@content) 코드 출력

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

• @mixin / @include
• @content
• @if / @else
• @each

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

• str-split()