//文件名为mixin.scss
// 2,3倍图适配
@mixin bg-image($url){
background-image: url("~imgs/icon/" + $url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
background-image: url("~imgs/icon/" + $url + "@3x.png");
}
} //一像素边框
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
} @mixin border-1px($color){
position: relative;
&:after{
display: block;
position: absolute;
left:;
bottom:;
width: 100%;
border-top: 1px solid $color;
content: ' ';
}
} @mixin border-none(){
&:after{
display: none;
}
}
在vue中使用
<style lang="scss">
//mixin.scss文件存放路径
@import '../assets/mixin.scss'; //brand@2x.png 和brand@3x.png文件
@include bg-image('brand');
</style>