vue3插件開發，VUE使用Stylus插件

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

下邊講解幾點內容

vue3插件開發，1、要給lang定義stylus

<style lang="stylus"></style>

2、vue文件中引入stylus文件

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

3、自定義樣式和使用

zbbz插件怎么安裝？在styl文件中設置通用樣式

$bgColor = #00bcd4

在vue中引用，$+name

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

在styl文件中將多個樣式集合成一個樣式

ellipsis()overflow: hiddenwhite-space: nowraptext-overflow: ellipsis

WA插件，在vue中引用，$+name

<style lang="stylus">
@import '~style/varibles.styl'
.headerbackground-color: $bgColorellipsis()
</style>

4、使用@media

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