css預編譯器stylus

1、stylus是什麼？

　　stylus是css預處理框架。在stylus中能夠使用函數、變量、判斷、循環等css沒有的東西來編寫樣式文件，執行這一套騷操做後，這個文件能夠編譯成css文件。

 

2、如何安裝stylus?

• 在用vue-cli搭建的項目中，(前提是已經安裝了node環境，能夠使用npm命令)在終端輸入:

npm i stylus stylus-loader --save-dev

　　（若是安裝了淘寶鏡像，可以使用cnpm安裝）

 

3、如何使用stylus?

方式一：引入外部的stylus文件

@import 'vendor'

方式二：在.vue文件的style裏，直接使用

<style lang="stylus">
  add(a, b=a)
    a = unit(a, px)
    b = unit(b, px)
    a + b
  $font = Helvetica
  .upload
    width 100px
    height 100px
    border 1px solid red
    border-radius add(6)
    font 18px bold $font
    &:hover
      border 3px solid blue
      cursor pointer
</style>

想要更詳細瞭解的朋友，能夠看這裏 =>

給你們分享一個介紹得更詳細的文章，連接