由于一些原因，接触到了stylus这个css预编译语言，这里简单的做一些记录
官方地址：https://stylus.bootcss.com/
GitHub地址：https://github.com/stylus/stylus/

引用stylus官网中的一句话：富于表现力、动态的、健壮的 CSS
stylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数
mixin.styl:

//配置背景图片函数
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

// 颜色定义规范
$color-theme = #ffcd32

//字体定义规范
$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模块中中规定好就可以了
<style lang="stylus" rel="stylesheet/stylus"></style>
还有一种是作为.styl文件引入
把css内容放在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>