//定义颜色
$c55:#;
$c22:#;
$c33:#;
$c99:#;
$c77:#;
$c00:#;
$cff:#fff;
$caa:#aaa;
$ccc:#ccc;
$cf0:#f0f0f0;
$cdd:#ddd;
$cee:#eee;
$cf9:#f9f9f9;
$cf7:#F7F7F7;
$cfa:#fafafa;
$cf60:#FF8225;
$c2a:#2a3542;
$c35:#35404d;
$c1d:#1DA1F2;
$cff0:#ff0000;
$c02:#02c12a;
$cf4:#f4f4f4;
$cbbe:#bbe3fb;
$cde :#dedede; // 背景图片地址和大小
@mixin bjs($url) {
background-image: url($url);
background-repeat: no-repeat;
background-size: 350px 250px;
}
//定义magin
@mixin setMargin($left, $right, $bottom,$top){
margin:$top $right $bottom $left;
}
//定义padding
@mixin setPadding($left, $right, $bottom,$top){
padding:$top $right $bottom $left;
}
//居中
@mixin jz {
position:absolute;
left:;
bottom:;
margin:;
padding:;
} //定义圆角
@mixin borderRadius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
//定位全屏
@mixin allcover{
position:absolute;
top:;
right:;
} //定位上下左右居中
@mixin center {
position: absolute;
top: %;
left: %;
transform: translate(-%, -%);
} //定位上下居中
@mixin ct {
position: absolute;
top: %;
transform: translateY(-%);
} //定位上下居中
@mixin cl {
position: absolute;
left: %;
transform: translateX(-%);
} //宽高
@mixin wh($width, $height){
width: $width;
height: $height;
}
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: %;
left: %;
margin-top: -($height) / ;
margin-left: -($width) / ;
}
//字体大小、行高、字体
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
font: #{$size}/#{$line-height} $family;
} //字体大小，颜色
@mixin sc($size, $color){
font-size: $size;
color: $color;
} //flex 布局和 子元素 对其方式
@mixin fj($type: space-between){
display: flex;
justify-content: $type; }
@mixin ns{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} @mixin hlh($s1) {
height: $s1;
line-height: $s1;
overflow: hidden;
}
@mixin thl($s2,$s3){
height:$s2;
line-height: $s3;
text-align: center;
} // one line text for ...
@mixin oneline($s1) {
overflow: hidden;
line-height: $s1;
height: $s1;
white-space: nowrap;
text-overflow: ellipsis;
} // move
@mixin yd($s1:,$s2:){
-webkit-transform:translate($s1,$s2);
transform:translate($s1,$s2);
} // zoom
@mixin fd($s1:1.2){
-webkit-transform:scale($s1);
transform:scale($s1);
} // rotate
@mixin xz($deg:){
-webkit-transform:rotate($deg+deg);
transform:rotate($deg+deg);
} // for link
@mixin dz($time:.25s){
-webkit-transition: all $time ease-in-out;
transition: all $time ease-in-out;
}
//同时设置magin padding
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
//设置magin 和 padding
@mixin set-mp($prop,$side, $value) {
#{$prop}-#{$side}: $value;
} %mt5 {
margin-top: 5px;
}
%mt10 {
margin-top: 10px;
}
%mt15 {
margin-top: 15px;
}
%pt5{
padding-top: 5px;
}
%pl10{
padding-left:10px;
}