[TOC] ## :-: 美化滾動條 ```css @mixin base-scrollbar { &::-webkit-scrollbar { display: block; width: 13px; height: 13px; } &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); background-clip: padding-box; border: 3px solid transparent; border-radius: 7px; } &::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.5); } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-track:hover { background-color: #f8fafc; } } body { /* 用法 */ @include base-scrollbar; div, textarea { @include base-scrollbar; } } ``` ## :-: float - 清除浮動流 ```css .clear-float::after { /* 設置塊級屬性 */ display: block; /* 清除浮動流的屬性 */ clear: both; /* 添加空文本內容 */ content: ''; } ``` ## :-: 單行打點 (3件套) ```css .text-ellipsis { /* 超出部分隱藏 */ overflow: hidden; /* 文字溢出部分點點... */ text-overflow: ellipsis; /* 文字溢出禁止換行 */ white-space: nowrap; } ``` ## :-: 多行打點展示 ```css @mixin row-dot-show($len){ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $len; } ``` ## :-: 列表滾動條，自動隱藏 (當鼠標 hover 時才顯示) ```css @mixin list-scroll-auto($size:0) { overflow-y: hidden; padding-left: $size + 13px; padding-right: $size + 13px; &:hover{ overflow-y: scroll; padding-right: $size; } } ``` ## :-: 列表陰影 (過度顯示)  ```css @mixin list-scroll-shadow($size:10px, $zIndex:10) { &::before, &::after{ content: ''; position: sticky; display: block; left: 0; width: 100%; height: $size; z-index: $zIndex; } &::before{ top: 0; background: linear-gradient(#fff, transparent); } &::after{ bottom: 0; background: linear-gradient(transparent, #fff); } } ```