@charset "utf-8"; /*主色调*/ $color: #ed4747; /*文字文本*/ @mixin text($fontsize,$color,$height,$line-height){ font-size: $fontsize; color:$color; height:$height; line-height: $line-height; } /*单行省略号*/ @mixin ellipsis($width){ width: $width; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } /*多行省略号*/ @mixin ellipsisLn($line){ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $line; } /*箭头*/ @mixin setArrow($arrowsize,$borderColor,$borderWidth,$direction){ display: inline-block; height: $arrowsize; width: $arrowsize; border-width: $borderWidth $borderWidth 0 0; border-color: $borderColor; border-style: solid; @if $direction == bottom{ transform: rotate(135deg); } @else if $direction == top{ transform: rotate(-45deg); } @else if $direction == right{ transform: rotate(45deg); } @else if $direction == left{ transform: rotate(-135deg); } } /**a标签hoverboder效果**/ @mixin hoverBorder($color){ position: relative; &:before{ content:''; display: inline-block; position: absolute; width: 100%; bottom: 0; left: 0; border-bottom: 1px solid $color; transform: translateY(6px); opacity: 0; transition: all .5s ease; } &:hover{ &:before{ transform: translateY(2px); opacity: 1; } } } /**使用vw适配**/ @function px2vw($px){ @return calc(100vw * (#{$px} / 375)); }