158 lines
3.2 KiB
SCSS
158 lines
3.2 KiB
SCSS
// sass 混合宏（函数）
|
||
|
||
/**
|
||
* 溢出省略号
|
||
* @param {Number} 行数
|
||
*/
|
||
@mixin ellipsis($rowCount: 1) {
|
||
@if $rowCount <=1 {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
} @else {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: $rowCount;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 控制用户能否选中文本
|
||
* @param {String} 类型
|
||
*/
|
||
@mixin userSelect($value: none) {
|
||
user-select: $value;
|
||
-moz-user-select: $value;
|
||
-ms-user-select: $value;
|
||
-webkit-user-select: $value;
|
||
}
|
||
|
||
// 绝对定位居中
|
||
@mixin absoluteCenter() {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
/**
|
||
* css3动画
|
||
*
|
||
*/
|
||
@mixin animation(
|
||
$from: (
|
||
width: 0px
|
||
),
|
||
$to: (
|
||
width: 100px
|
||
),
|
||
$name: mymove,
|
||
$animate: mymove 2s 1 linear infinite
|
||
) {
|
||
-webkit-animation: $animate;
|
||
-o-animation: $animate;
|
||
animation: $animate;
|
||
|
||
@keyframes #{$name} {
|
||
from {
|
||
@each $key, $value in $from {
|
||
#{$key}: #{$value};
|
||
}
|
||
}
|
||
|
||
to {
|
||
@each $key, $value in $to {
|
||
#{$key}: #{$value};
|
||
}
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes #{$name} {
|
||
from {
|
||
@each $key, $value in $from {
|
||
$key: $value;
|
||
}
|
||
}
|
||
|
||
to {
|
||
@each $key, $value in $to {
|
||
$key: $value;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 圆形盒子
|
||
@mixin circle($size: 11px, $bg: #fff) {
|
||
border-radius: 50%;
|
||
width: $size;
|
||
height: $size;
|
||
line-height: $size;
|
||
text-align: center;
|
||
background: $bg;
|
||
}
|
||
|
||
// placeholder
|
||
@mixin placeholder($color: #bbb) {
|
||
// Firefox
|
||
&::-moz-placeholder {
|
||
color: $color;
|
||
opacity: 1;
|
||
}
|
||
|
||
// Internet Explorer 10+
|
||
&:-ms-input-placeholder {
|
||
color: $color;
|
||
}
|
||
|
||
// Safari and Chrome
|
||
&::-webkit-input-placeholder {
|
||
color: $color;
|
||
}
|
||
|
||
&:placeholder-shown {
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
//背景透明，文字不透明。兼容IE8
|
||
@mixin betterTransparentize($color, $alpha) {
|
||
$c: rgba($color, $alpha);
|
||
$ie_c: ie_hex_str($c);
|
||
background: rgba($color, 1);
|
||
background: $c;
|
||
background: transparent \9;
|
||
zoom: 1;
|
||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c});
|
||
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})';
|
||
}
|
||
|
||
//添加浏览器前缀
|
||
@mixin browserPrefix($propertyName, $value) {
|
||
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
|
||
#{$prefix}#{$propertyName}: $value;
|
||
}
|
||
}
|
||
|
||
// 边框
|
||
@mixin border($color: red) {
|
||
border: 1px solid $color;
|
||
}
|
||
|
||
// 背景滤镜
|
||
@mixin backdropBlur() {
|
||
--tw-backdrop-blur: blur(30px);
|
||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
|
||
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||
var(--tw-backdrop-sepia);
|
||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
|
||
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||
}
|