// $back-color:green; // #app{ // background-color:$back-color; // } // @mixin customScrollbar{ // background-color: red; // } // @mixin red { // background-color:red; // } // .mixin1 { // @include red(); // } /** * 自定义滚动条 */ @mixin customScrollbar { &::-webkit-scrollbar { width: 12px; height: 12px; } /* 滚动槽 */ &::-webkit-scrollbar-track { box-shadow: inset006pxrgba(0, 0, 0, 0.3); -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3); border-radius: 10px; } /* 滚动条滑块 */ &::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 0, 0, 0.2); box-shadow: inset006pxrgba(0, 0, 0, 0.5); -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); } } /* 设置滚动条的样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb:hover { background: #bfbfbf; } /* 滚动槽 */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3); border-radius: 10px; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { border-style: solid; border-width: 3px; border-color: transparent; border-radius: 10px; background: rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); &:hover { border-color: #bfbfbf; } } .custom-scrollbar { @include customScrollbar(); } .el-message-box { width: 450px }