|
// 根据不同的屏幕加载背景图片
|
@mixin bi($url, $type: 'png') {
|
background-image: url($url + "@2x." + $type);
|
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
|
background-image: url($url + "@3x." + $type);
|
background-size: cover;
|
}
|
}
|
|
// 文字超出后以...显示
|
@mixin no-wrap {
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
// 扩展小图标按钮的点击区域
|
@mixin extend-click() {
|
position: relative;
|
&:before {
|
content: '';
|
position: absolute;
|
top: -10px;
|
left: -10px;
|
right: -10px;
|
bottom: -10px;
|
}
|
}
|
|
@mixin btn-scale-hover(){
|
transition: .4s all;
|
&:hover{
|
transform: scale(1.1);
|
}
|
}
|
|
@mixin bi-saturate-hover($background-color, $value: 20){ // 背景颜色增加饱和度
|
transition: .6s all;
|
&:hover{
|
background-color: saturate($background-color, $value);
|
}
|
}
|
|
@mixin color-saturate-hover($color, $value: 30){ // 颜色增加饱和度
|
transition: .6s all;
|
&:hover{
|
color: saturate($color, $value);
|
}
|
}
|
|
@mixin bi-lighten-hover($background-color, $value: 10){ // 背景颜色变浅。
|
transition: .6s all;
|
&:hover{
|
background-color: lighten($background-color, $value);
|
}
|
}
|
|
@mixin bi-opacity-hover($opacity: .8){ // 透明度
|
transition: .4s all;
|
&:hover{
|
opacity: $opacity;
|
}
|
}
|
