scrollbar()

스크롤바 (Scroll Bar) 믹스인

용도

스크롤바 모양을 꾸미고자 할 때 사용합니다.

circle-exclamation

사용법

scrollbar() 믹스인을 호출합니다. 썸(Thumb) 크기, 색상, 둥글기, 바(Bar) 색상 등을 설정할 수 있습니다.

scrollbar($size:number, $thumb-color:color, $thumb-radius:number, $bar-color:color)

.scrollbar {
  @include scrollbar(rem(20), #20bebe);
}

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$size

number

10px

$thumb-color

color

get-color(black)

$thumb-radius

number

3px

$bar-color

color

썸 색상 명도 대비를 분석해 계산된 색 (로직 참고)

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

.scrollbar {
  scrollbar-face-color: #20bebe;
  scrollbar-track-color: #0f5656;
}
.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #20bebe #0f5656;
}
.scrollbar::-webkit-scrollbar {
  width: 1.25rem;
  height: 1.25rem;
}
.scrollbar::-webkit-scrollbar-thumb {
  background: #20bebe;
  border-radius: 3px;
}
.scrollbar::-webkit-scrollbar-track {
  background: #0f5656;
}

로직

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

  1. Sass 컬러(Color) 모듈 사용

  2. 전달 받은 인자 값이 없을 경우, 기본 설정 된 매개변수 값 사용

  3. 전달 받은 인자 값이 있을 경우 썸 크기, 색상, 둥글기, 바 색상 등 값을 설정하여 코드 출력

circle-check

참고

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

믹스인에 사용된 직접 제작한 모듈은 다음과 같습니다.

Last updated