scroll css

  • 이런 모양의 스크롤바를 만들 수 있다
index.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* scroll bar */
& {
&::-webkit-scrollbar {
width: 10px;
}

&::-webkit-scrollbar-track {
background: #f1f1f1;
}

&::-webkit-scrollbar-thumb {
background: #888;
}

&::-webkit-scrollbar-thumb:hover {
background: #555;
}
}

참고

sass, scss 연습

sass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 변수
$primaryBtn: rgb(78, 201, 253);
$textColor: rgb(0, 0, 0);

button {
background: $primaryBtn;

// 중첩 nesting 가능
// & ; 상위 선택자
&::after {
content: 'hellooo';
}

// 중첩된 속성
margin: {
top: 10px;
left: 20px;
}
padding: {
bottom: 40px;
right: 30px;
}
}
  • 중첩 이 기능 하나만으로도 엄청나게 강력한 기능이라고 생각한다
  • 스타일 적용되는 것도 직관적이고, html이랑 같은 구조로 css를 작성할 수 있을 것 같다

연습 코드 저장소