[TOC] #### Vue 常用Mixins ``` $animationTime: .2s; $animationType: linear; $ratio: 375 / 10; @function px2rem($px) { @return $px / $ratio + rem; } @mixin absCenter { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } @mixin center { display: flex; justify-content: center; align-items: center; } @mixin left { display: flex; justify-content: flex-start; align-items: center; } @mixin top { display: flex; justify-content: center; align-items: flex-start; } @mixin right { display: flex; justify-content: flex-end; align-items: center; } @mixin columnTop { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } @mixin columnLeft { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } @mixin columnCenter { display: flex; flex-direction: column; justify-content: center; align-items: center; } @mixin ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } @mixin ellipsis2($line) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $line; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; } @mixin scroll { overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } } @mixin leftBottom { display: flex; justify-content: flex-start; align-items: flex-end; } .icon { color: #666; font-size: px2rem(16); } .title { color: #666; font-size: px2rem(16); font-weight: bold; } ```