/* * 内部通用scss */ @mixin clearfix { &:after { clear: both; content: '.'; display: block; height: 0; line-height: 0; overflow: hidden; } // *height: 1%; } @mixin hairline { &::after { content: " "; box-sizing: border-box; pointer-events: none; border: 0 solid #ebedf0; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; -webkit-transform: scale(0.5); transform: scale(0.5); @content } }; @mixin hairline--no { @include hairline{ border: 0; }; } @mixin hairline--all { @include hairline{ border-width: 1px; }; } @mixin hairline--right { @include hairline{ border-right-width: 1px; }; } @mixin hairline--left { @include hairline{ border-left-width: 1px; }; } @mixin hairline--bottom { @include hairline{ border-bottom-width: 1px; }; } @mixin hairline--top { @include hairline{ border-top-width: 1px; }; } @mixin hairline--right--bottom { @include hairline{ border-left-width: 0; border-top-width: 0; border-right-width: 1px; border-bottom-width: 1px; }; } @mixin hairline--left--top { @include hairline{ border-right-width: 0; border-bottom-width: 0; border-left-width: 1px; border-top-width: 1px; }; } //一行溢出 @mixin text-overflow{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; }; //两行溢出 @mixin ov($num: 2){ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $num; line-clamp: $num; -webkit-box-orient: vertical; } @mixin ellipsis($lines: 1) { @if ($lines==1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $lines; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } }