VUE使用Stylus插件

第一次接觸stylus
對於不使用{} ; 等符號，感受還不太習慣。
並且層級之間的類，也要錯落有致，不是統一排一列。額。。。。
可是它更簡潔，規範，便於維護。

下邊講解幾點內容

一、要給lang定義stylus

<style lang="stylus">

</style>

二、vue文件中引入stylus文件

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

</style>

三、自定義樣式和使用

在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>

四、使用@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%