You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
spms-vue/src/styles/mixin.scss

169 lines
3.4 KiB
SCSS

3 years ago
// 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;
}
}