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>

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

给你们分享一个介绍得更详细的文章，连接