sass移动端常用mixin+function

//基础修饰
@mixin borRadius($radius:50%){ border-radius:$radius;
}

//1px边框
//通过background实现的1px，设置到dom本身，不会绘制padding和margin区域
@mixin onePxByBg($borColor:#efefef,$direction:bottom,$borPx:1px) { background-image: -webkit-linear-gradient(top, $borColor, $borColor 50%, transparent 50%); background-image: linear-gradient(180deg, $borColor, $borColor 50%, transparent 50%); background-size: 120% $borPx; background-repeat: no-repeat; background-origin: content-box; @if $direction == bottom { background-position: bottom left; } @else if $direction == top { background-position: top left; } } //下面是通过伪类实现的1px线条 @mixin oneRectangle($borColor:#efefef, $direction:bottom,$borPx:1px) {
&:after{
position: absolute;
transform-origin: 0 0;
content: ”;
background-color: $borColor; @if$direction == bottom {
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
transform: scale(1,.5);
}
@else if $direction == top { top: -1px; left: 0; width: 100%; height: 2px; transform: scale(1,.5); } @else if$direction == right {
top: 0;
left: -1px;
width: 2px;
height: 100%;
transform: scale(.5,1);
}
@else if $direction == left {
top: 0;
right: -1px;
width: 2px;
height: 100%;
transform: scale(.5,1);
}
}
}

@mixin notStatic($position: absolute,$top: auto, $right: auto,$bottom: auto, $left: auto,$index:3) {
top: $top; right:$right;
bottom: $bottom; left:$left;
z-index: $index; @if$position == absolute {
position: absolute;
}
@else if $position == relative { position: relative; } @else if$position == fixed {
position: fixed;
}
}

@mixin absoYCenter{
@include notStatic(absolute, 50%,auto,auto,auto,3);
transform: translateY(-50%);
}
@mixin absoXCenter{
@include notStatic(absolute, auto,auto,auto,50%,3);
transform: translateX(-50%);
}
@mixin absoCenter{
@include notStatic(absolute, 0,0,0,0,3);
}
@mixin absoBot{
@include notStatic(absolute, auto,0,0,0,3);
}

//关于文本的基础样式，诸如颜色，字体，对齐方式等
@mixin txtCenter{
text-align: center;
}
@mixin txtLeft{
text-align: left;
}
@mixin txtRight{
text-align: right;
}
@mixin pullLeft{
float: left;
}
@mixin pullRight{
float: right;
}
@mixin clear{
&::after{
display: block;
content: ‘.’;
visibility:hidden;
height:0;
clear:both;
}
}
@mixin overClear{
overflow: hidden;
}
//行高
@mixin lineHei($lineHei:1.5){ line-height:$lineHei;
}
//单行及多行文本溢出控制
@mixin singleLimitWidth() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

@mixin doubleLimitWidth($num:2){ display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:$num;
}

//文字大小定义
@mixin fontDpr($fontSize:12px){ font-size:$fontSize;
[data-dpr = ‘2’] & {
font-size: $fontSize*2; } [data-dpr = ‘3’] & { font-size:$fontSize*2;
}
}

@mixin disabled($bgColor: #e6e6e6,$textColor:#ababab){
background-color: $bgColor !important; color:$textColor !important;
cursor: not-allowed !important;
}

//内阴影和外阴影
@function black($opacity) { @return rgba(0, 0, 0,$opacity)
}

@function white($opacity) { @return rgba(255, 255, 255, $opacity) } @mixin box-emboss($opacity, $opacity2) { box-shadow: white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0; } //隐藏文字 @mixin hide-text { overflow: hidden; text-indent: -9000px; display: block; } //边框阴影 @mixin boxshadow($x: 3px, $y: 3px,$extend: 4px, $shadowcolor: #cccccc) { box-shadow: $x $y $extend $shadowcolor; } //动画keyframes生成 @mixin keyframes($animationName) {
@keyframes #{$animationName} {
@content;
}
}