如果你要实现同样的功能，你就要重新了，说到转码这个东西，还真的是不好说啊。请你用自己的手好好分析一下，重新做一个类型的就行了。
希望我的回答能让你解决问题。
stylus跟sass和less一样都是css预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，官网的介绍为：富于表现力、动态的、健壮的 CSS因为stylus出现的比较晚，因此它的语法比较新。
Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。
stylus支持三种注释：
单行注释在编译之后会被删除，多行注释会被保留，多行缓冲注释相当于告诉Stylus压缩的时候这段无视直接输出。
编译之后的css
在stylus中，认为对于元素样式的设置 , {} : 是无意义的，因此在stylus中可以不用书写它们。同样因为没有来这些符号，所有空白符，换行，空格以及tab都很重要，写的时候要慎重。
stylus是用js写的，因此很多语法跟js很像，比如js定义变量：
stylus中定义变量：
Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性。如下：
这样就可以简单的通过前置@字符在属性名前来访问该属性名对应的值。
另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中，我们默认指定z-index值为1，但是，只有在z-index之前未指定的时候才这样：
属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）。下面这个例子，@color最后是blue.
Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{'border' + '-radius'}等同于-webkit-border-radius 比如：
编译之后
编译过后：
stylus中支持混合，语法跟js中定义函数很像，它的作用是用来复制样式或者兼容浏览器
js中定义函数：
在stylus中定义混合语法：
1.混合名称() ,参数集合中可以传递参数，多个参数使用逗号隔开
2.混合名称 参数 ，多个参数使用逗号隔开
3.混合名称 参数 ，多个参数使用空格隔开
1.属性混合
封装一个属性，用来兼容各个浏览器
特点：通常以属性名称定义混合，来覆盖原有的属性，兼容浏览器
2.样式混合
封装的是多个属性，用来复用样式
编译之后
注意：
1.混合的参数集合绝对不能省略
2.混合名称与参数集合之间绝对不能有空格
3.如果参数中出现了空格，我们要使用第二种方式
Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致；却可以返回值。
很简单的例子，两数值相加的方法：
编译之后
sylus还可以引入外部的stylus文件
stylus会根据@keyframes自动创建兼容浏览器的样式，但是内容样式如果出现了css3则不会处理，需要使用混合书写的方式进行处理
举个栗子：
编译之后：
编译之后：
编译之后：
不管什么原因，如果遇到Stylus搞不定的特殊需求，你可以使用@css使其作为CSS字面量解决
编译为：
Stylus可以字符转码。这可以让字符变成标识符，或是渲染成字面量。注意Stylus中/当作为属性使用的时候需要用括号括起来：
编译为：
需要在vue.config.js中配置
然后在main.js中引入公共样式文件，这样就不需要在组件里面再引入一次公共样式啦
官网： http://stylus-lang.com/
参考中文文档： https://www.zhangxinxu.com/jq/stylus/
