|
|
|
|
|
// Mixin
|
|
|
|
|
|
$font-color: #4a4a4a;
|
|
|
//头部高度
|
|
|
$header-height: 60px;
|
|
|
//底部高度
|
|
|
$footer-height: 1.30666666rem;
|
|
|
|
|
|
//清除浮动
|
|
|
@mixin clearfix() {
|
|
|
&:before,
|
|
|
&:after {
|
|
|
content: " ";
|
|
|
display: table;
|
|
|
}
|
|
|
&:after {
|
|
|
clear: both;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
//水平居中
|
|
|
@mixin center-block() {
|
|
|
display: block;
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
|
|
|
//全屏定位
|
|
|
@mixin fxied-absolute(){
|
|
|
position:absolute;
|
|
|
top:0;
|
|
|
right:0;
|
|
|
}
|
|
|
@mixin fxied-fixed(){
|
|
|
position:fixed;
|
|
|
top:0;
|
|
|
right:0;
|
|
|
}
|
|
|
@mixin fxied-bottom(){
|
|
|
position:fixed;
|
|
|
bottom: 0;
|
|
|
right: 0;
|
|
|
}
|
|
|
//定位上下左右居中
|
|
|
@mixin fxied-center() {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
//定位上下居中
|
|
|
@mixin fxied-top() {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
//左右居中
|
|
|
@mixin fxied-left() {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
|
|
|
|
|
|
//尺寸助手
|
|
|
@mixin size($width, $height) {
|
|
|
width: $width;
|
|
|
height: $height;
|
|
|
}
|
|
|
//正方形
|
|
|
@mixin square($size) {
|
|
|
@include size($size, $size);
|
|
|
}
|
|
|
|
|
|
//调整大小的文本域
|
|
|
@mixin resizable($direction: both) {
|
|
|
// Options: horizontal, vertical, both
|
|
|
resize: $direction;
|
|
|
// Safari fix
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
//截断文本 元素必须是 block 或 inline-block 级。
|
|
|
@mixin text-overflow() {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
//视网膜屏幕（Retina）下的图片
|
|
|
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
|
|
|
background-image: url($file-1x);
|
|
|
|
|
|
@media
|
|
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
|
|
only screen and ( min--moz-device-pixel-ratio: 2),
|
|
|
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
|
|
only screen and ( min-device-pixel-ratio: 2),
|
|
|
only screen and ( min-resolution: 192dpi),
|
|
|
only screen and ( min-resolution: 2dppx) {
|
|
|
background-image: url($file-2x);
|
|
|
background-size: $width-1x $height-1x;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//左右浮动
|
|
|
@mixin f_left(){
|
|
|
float: left;
|
|
|
}
|
|
|
@mixin f_right(){
|
|
|
float: right;
|
|
|
}
|
|
|
|
|
|
|
|
|
@mixin scrollBar {
|
|
|
&::-webkit-scrollbar-track-piece {
|
|
|
background: #d3dce6;
|
|
|
}
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
}
|
|
|
&::-webkit-scrollbar-thumb {
|
|
|
background: #99a9bf;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@mixin relative {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
@mixin pct($pct) {
|
|
|
width: #{$pct};
|
|
|
position: relative;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
@mixin triangle($width, $height, $color, $direction) {
|
|
|
$width: $width/2;
|
|
|
$color-border-style: $height solid $color;
|
|
|
$transparent-border-style: $width solid transparent;
|
|
|
height: 0;
|
|
|
width: 0;
|
|
|
@if $direction==up {
|
|
|
border-bottom: $color-border-style;
|
|
|
border-left: $transparent-border-style;
|
|
|
border-right: $transparent-border-style;
|
|
|
}
|
|
|
@else if $direction==right {
|
|
|
border-left: $color-border-style;
|
|
|
border-top: $transparent-border-style;
|
|
|
border-bottom: $transparent-border-style;
|
|
|
}
|
|
|
@else if $direction==down {
|
|
|
border-top: $color-border-style;
|
|
|
border-left: $transparent-border-style;
|
|
|
border-right: $transparent-border-style;
|
|
|
}
|
|
|
@else if $direction==left {
|
|
|
border-right: $color-border-style;
|
|
|
border-top: $transparent-border-style;
|
|
|
border-bottom: $transparent-border-style;
|
|
|
}
|
|
|
}
|
