由于一些原因拘央，接觸到了stylus這個css預(yù)編譯語言设联，這里簡單的做一些記錄
官方地址：https://stylus.bootcss.com/
GitHub地址：https://github.com/stylus/stylus/

引用stylus官網(wǎng)中的一句話：富于表現(xiàn)力给梅、動態(tài)的囱嫩、健壯的 CSS
stylus是一個強大的css預(yù)編譯語言,stylus支持省略花括號苦蒿，支持省略分號沾谓，代碼整潔委造，支持引入，并且支持語法內(nèi)函數(shù)
mixin.styl:

//配置背景圖片函數(shù)
bg-image($url)
  background-image: url($url + "2.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "3.png")

variable.styl

// 顏色定義規(guī)范
$color-theme = #ffcd32

//字體定義規(guī)范
$font-size-medium = 14px

content.vue

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/mixin"
  @import "~common/stylus/variable"
    .recommend-list
      .list-title
        height 300px
        width 100%
        font-size $font-size-medium
        color $color-theme
      .item
        padding 0 20px 20px 20px
        background bg-image('../images/bg.png')
        &.active
          color #fff
</style>

使用非常簡單
安裝stylus均驶，使用npm安裝,stylus和stylus-loader昏兆，一個都不能少
npm install stylus stylus-loader --save-dev
使用的話分為兩種，一種是直接在vue中的style模塊中使用妇穴，這時在style模塊中中規(guī)定好就可以了
<style lang="stylus" rel="stylesheet/stylus"></style>
還有一種是作為.styl文件引入
把css內(nèi)容放在styl文件中爬虱，然后在vue的style模塊中通過@import引入
content.styl

.recommend-list
      .list-title
        height 65px
        line-height 65px
        text-align center
        font-size $font-size-medium
        color $color-theme
      .item
        display flex
        box-sizing border-box
        align-items center
        padding 0 20px 20px 20px
        background bg-image('../images/bg.png')
        &.active
          color #fff

content.vue

<style>
  @import "content.styl"
</style>