vue.js 2.0版本—1像素border实现

1.怎么手机上观看自己调试好的样式

• 把地址换为ip:8080/index.html
• 草料网站 在这个网站中生成二维码
• 用手机扫一扫

2.目录结构

src/common/stylus
├── base.styl
├── icon.styl
├── index.styl
└── mixin.styl

3.编写base.styl,icon.styl,index.styl,mixin.styl代码的编写

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

• mixin.styl代码的编写

//这里是负责1像素边框问题
border-1px($color) //stylus的mixins语法支持传入变量
  position: relative //创建相对定位布局,为after和before的border的绝对布局做定位
  &::after //使用伪元素::after,在元素之后插入内容
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100% //需要横向撑开边框宽度
    border-top: 1px solid $color //因为是在元素之后插入,所以是用上边框
    content: ' ' //after或者before使用的时候,不传入东西也要填一个空字符串

• index.styl代码的编写

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

• icon.styl代码的编写

@font-face
  font-family: 'sell-ico'
  src: url('../fonts/sell-ico.eot?gr00o7')
  src: url('../fonts/sell-ico.eot?gr00o7#iefix') format('embedded-opentype'),
    url('../fonts/sell-ico.ttf?gr00o7') format('truetype'),
    url('../fonts/sell-ico.woff?gr00o7') format('woff'),
    url('../fonts/sell-ico.svg?gr00o7#sell-ico') format('svg')
  font-weight: normal
  font-style: normal

[class^="icon-"], [class*=" icon-"]
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'sell-ico' !important
  speak: none
  font-style: normal
  font-weight: normal
  font-variant: normal
  text-transform: none
  line-height: 1

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.icon-arrow_lift:before
  content: "\e900"

.icon-thumb_up:before
  content: "\e901"

.icon-thumb_down:before
  content: "\e902"

.icon-shopping_cart:before
  content: "\e903"

.icon-favorite:before
  content: "\e904"

.icon-check_circle:before
  content: "\e905"

.icon-close:before
  content: "\e906"

.icon-remove_circle_outline:before
  content: "\e907"

.icon-add_circle:before
  content: "\e908"

.icon-keyboard_arrow_right:before
  content: "\e909"

4.学习stylus地址

http://www.zhangxinxu.com/jq/stylus/import.php

5.报错

Module build failed: ParseError: unexpected "indent"
 解决：
   重新缩进
 Strings must use singlequote  
 解决：
   把字符串转为单字符