【stylus】富於表現力、動態的、健壯的 CSS

前言

來一段stylus的代碼感受一下

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"

  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    border-1px(rgba(7, 17, 27, 0.1))
    .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size: 14px
        color: rgb(77, 85, 93)
        &.active
          color: rgb(240, 20, 20)
</style>

不需要括號？冒號?可以直接創建與分享？

接下來一起了解一下stylus吧

01 介紹

學名叫 stylus，是 CSS 的預處理框架。

CSS 預處理，顧名思義，預先處理 CSS。那 stylus 咋預先處理呢？stylus 給 CSS 添加了可編程的特性，也就是說，在 stylus 中可以使用變量、函數、判斷、循環一系列 CSS 沒有的東西來編寫樣式文件，執行這一套騷操作之後，這個文件可編譯成 CSS 文件。

參考文章

02 Stylus特性

相關知識瀏覽一下
相關資料瀏覽一下

03 安裝與使用

1.安裝node+npm環境
2.命令行全局安裝stylus

cnpm i stylus@latest -g

3.可以在命令行輸入 stylus -h 查看有哪些可以用的命令

參考文章

04 更多資料

關於stylus更多信息（如文檔以及使用示例打包下載-英文）可以去GitHub查看。
可以去鑫空間，鑫生活查閱瞭解更多

05 總結

原來還有這種騷操作