/*
- px2rem 转换
/
\(base-font-size: 750;@function px2rem(\)px) {
@return \(px / 75px * 1rem; } @function rem(\)px) {
@return ($px / \(base-font-size) * 10rem; } @function vw(\)px) {
@return ($px / $base-font-size) * 100vw;
}
/ - methods
*/
// 定位上下左右居中
@mixin pcenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 定位上下居中
@mixin ptcenter {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
// 定位左右居中
@mixin plcenter {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
// 字体大小，颜色
@mixin fsc($size, \(color) { font-size: px2rem(\)size);
color: $color;
}
// flex 布局和子元素对齐方式
@mixin flex($type: space-between) {
display: flex;
justify-content: \(type; } @mixin wh(\)width, $height) {
width: $width;
height: \(height; } @mixin square(\)size) {
@include wh($size, \(size); } @mixin size(\)width, $height) {
width: $width;
height: \(height; } @mixin text_overflow(\)lines: 1) {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: $lines;
-moz-line-clamp: $lines;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
@if \(lines == 1 { white-space: nowrap; display: block; } @else { display: -webkit-box; } } @mixin overflow-line(\)lines) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
-moz-line-clamp: \(lines; } @mixin text-overflow(\)lines: 1) {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: $lines;
-moz-line-clamp: $lines;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
@if $lines == 1 {
white-space: nowrap;
display: block;
} @else {
display: -webkit-box;
}
}
@mixin overflow_auto {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@mixin box-sizing($sizing: border-box) {
-webkit-box-sizing: $sizing;
-moz-box-sizing: $sizing;
box-sizing: \(sizing; } @mixin sc(\)size, $color) {
font-size: $size;
color: $color;
}
@mixin clearfix {
&:before,
&:after {
content: ' ';
display: table;
}
&:after {
clear: both;
}
}
@mixin iphoneX-footer() {
[data-dpr='2'] & {
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
//iphoneXR
padding-bottom: calc(env(safe-area-inset-bottom) * 2);
}
}
[data-dpr='3'] & {
@media only screen and (-webkit-device-pixel-ratio: 3) {
//iphone X Xs XsMax
padding-bottom: calc(env(safe-area-inset-bottom) * 3);
}
}
}
相信坚持的力量，日复一日的习惯.
