css预编译器stylus

一、stylus是什么？

　　stylus是css预处理框架。在stylus中可以使用函数、变量、判断、循环等css没有的东西来编写样式文件，执行这一套骚操作后，这个文件可以编译成css文件。

 

二、如何安装stylus?

• 在用vue-cli搭建的项目中，(前提是已经安装了node环境，可以使用npm命令)在终端输入:

npm i stylus stylus-loader --save-dev

　　（如果安装了淘宝镜像，可使用cnpm安装）

 

三、如何使用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>

想要更详细了解的朋友，可以看这里 =>

给大家分享一个介绍得更详细的文章，链接