VUE使用Stylus插件

第一次接触stylus
对于不使用{} ; 等符号，感觉还不太习惯。
而且层级之间的类，也要错落有致，不是统一排一列。额。。。。
但是它更简洁，规范，便于维护。

下边讲解几点内容

1、要给lang定义stylus

<style lang="stylus">

</style>

2、vue文件中引入stylus文件

<style lang="stylus">
@import '~assets/style/varibles.styl'

</style> 

3、自定义样式和使用

在styl文件中设置通用样式

$bgColor = #00bcd4

在vue中引用，$+name

<style lang="stylus">
@import '~style/varibles.styl'
.header
  background-color: $bgColor
</style>

在styl文件中将多个样式集合成一个样式

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

在vue中引用，$+name

<style lang="stylus">
@import '~style/varibles.styl'
.header
  background-color: $bgColor
  ellipsis()
</style>

4、使用@media

// 最大330px
@media (max-width : 330px)
    .home-index
      margin-top: -56%
// 最大最小的多个使用
@media (max-width : 410px) and (min-width : 330px), (max-width : 630px) and (min-width : 510px)
    .home-index 
      margin-top: -56%