Vue2.6实现去哪儿网 --复用CSS值(sass)

分步：

1.在src/assets/styles中新建varibles.styl文件，在里面声明

// varibles.styl
$bgColor = #00bcd4
$darkTextColor = #333
$headerHeight = .86rem

2.在 vue 单文件的style标签中，import这个文件

@import '~styles/varibles.styl'

3.在css中使用

.a {
    background: $bgColor
}

同理，在css中使用方法也可以用这样的解决方案 

1.在src/assets/styles中新建mixins.styl文件，在里面声明方法

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

2.在前端页面的style标签中，import这个文件

@import '~styles/mixins.styl'

3.在css中使用方法

.a{
    ellipsis()
}

注：在mixins.styl中，如果使用大写字母作为方法名则有可能使样式无法应用到页面上