webpack-vue全家桶之实现border-1px

来源：互联网发布：kuka机器人基本编程编辑：程序博客网时间：2024/05/19 01:28

app.vue
引入@import “./common/stylus/mixin.styl”

border-1px(rgba(7, 17, 27, 0.1))

mixin.styl

 border-1px($color)  position: relative  &:after    display: block    position: absolute    left: 0    bottom: 0    width: 100%    border-top: 1px solid $color    content: ' '

base.styl

@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)

index.styl

@import "./mixin"@import "./icon"@import "./base"

main.js

import 'common/stylus/index.styl';

base里面写的媒体查询为了适应不同的分辨率
mixin里面写的都是样式函数为了方便你更改参数
mainjs里面引入的index.styl是将这几个样式文件都注册并加载

阅读全文

0 0