在CSS3中，通过 transform 属性来使用 transform 功能。
使用 rotate 方法，在参数中加入角度值，角度值后面跟表示角度单位的 deg 文字即可，旋转方向为顺时针旋转。
运行效果：
使用 scale 方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。
上面的示例使 div 元素缩小了50%。
另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。
上面的示例使 div 元素水平方向缩小了50%，垂直方向放大了一倍。
效果如图：
使用 skew 方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
上面的示例使 div 元素水平方向上倾斜了30度，垂直方向上倾斜了30度。
效果如图：
另外， skew 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。
使用 translate 方法来将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。
上面的示例把 div 元素水平方向上向右移动了 50px ，垂直方向上向上移动了 50px 。
另外， translate 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行移动，垂直方向上不移动。
示例1：
效果如图：
示例2：
效果如图：
这两个示例都是对同一个页面中同一个元素进行多重变形的示例， 而且各种变形方曲中所使用的参数也都相同，差别只是使用三种变形方法的先后顺序不一样。但，元素在两个页面上所处位置并不相同。说明 transform 参数的顺序不同，结果可能会不一样。
在使用 transform 方融进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用 transform-origin 属性，可以改变变形的基准点。
接下来，我们使用 transform-origin 属性把变形的基准点修改为第二个元素的左下角处。
运行效果：
transform-origin 属性的两个参数分别代表：基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置，其中"基准点在元素水平方向上的位置"中可以指定的值为 left 、 center 、 right ， "基准点在元素垂直方向上的位置"中可以指定的值为 top 、 center 、 bottom 。
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/
