慕课网饿了么项目骨架搭建时,关于1像素边框处理代码如下:
App.vue里面:
<style lang='stylus' rel='stylesheet/stylus'>
@import './common/stylus/mixin.styl'
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
border-1px(rgba(7, 17, 27, 0.1))
.tab-item
flex: 1
text-align: center
& > a
display: block
font-size: 14px
color: rgb(77, 85, 93)
&.active
color: rgb(240, 20, 20) // router里面传递了参数linkActiveClass: 'active'
</style>
mixin.styl里面:
border-1px($color)
position: relative//子绝父相
&::after//在父元素后加上内容,对应下边框。
display: block
position: absolute
left: 0
bottom: 0//下边框距离为0
width: 100%
border-bottom: 1px solid $color
content: ''
&::before//在父元素前加上内容,对应上边框。
display: block
position: absolute
left: 0
top: 0//上边框距离为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)//0.7*1.1.05约等于1
transform: scaleY(0.7)//上下边框,缩放只存在于Y轴
&::before
-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)//0.5*2=1倍大小。
transform: scaleY(0.5)//上下边框,缩放只存在于Y轴
&::before
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
通过index.styl一次性引入:
@import "./mixin"
@import "./base"
@import "./icon"
main.js里面导入:
import Vue from 'vue'
import App from './App'
// 引入路由
import router from './router/router'
import './common/stylus/index.styl'
let vm = new Vue({
router, // 注入到根实例中
el: '#app',
render: h => h(App)
})
Vue.use({vm})