混合就是一种或者一系列属性从一种规则集引入（混合）到另一种规则集的方法
1. 普通混合
一个普通的css样式
我们发现 h1,h2的样式中有很多重复的，而解决方式如下，将重复的放在一个类中：
定义一个.font_h类，在HTML文件对应的元素山添加class="font_h"属性
less可以不这么写，less写法如下：
将定义好的类混入css样式中，这样就不用在HTML的元素中写类了
编译后的css，和下面不带输出的混合做对比
2. 不带输出的混合
编译后的css文件，从中发现.font_h不见了
3. 带选择器的混合
编译之后的css文件
其中， .my-hover-mixin():hover == &:hover
4. 带参数的混合
编译后的css文件
5. 带参数并且有默认值
编译后的css文件
调用后如果 .border_have()不带参数，就用默认的参数；如果传递了参数，就用传入的参数。而上边带参数但没有默认值时，如果调用时不传入参数就会报错。
6. 带多个参数的混合
编译后的css文件
less文件（定义具有多个相同名称和参数数量的混合）
编译后的css文件
less文件
编译后的css文件
如果使用mixin的时候只带一个参数，比如.mixin(red)，这个属性会导致所有的mixin都会强制使用这个明确的参数
7. 命名参数
编译后的css文件
8. @arguments变量
编译后的css文件
less文件
编译后的css文件
这里的solid是默认值，但也必须写上，否则会报错。
9. 匹配模式
编译后的css文件
注意：中间用逗号分割开
10. 得到混合中变量的返回值
编译后的css文件
事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：混入(Mixins)——class中的class；
参数混入——可以传递参数的class，就像函数一样；
嵌套规则——Class中嵌套class，从而减少重复的代码；
运算——CSS中用上数学；
颜色功能——可以编辑颜色；
名字空间(namespace)——分组样式，从而可以被调用；
作用域——局部修改样式；
JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。
另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。
LESS Is More
介绍
在你的项目中引入LESS很简单：
下载less.js
创建一个文件来放你的样式，比如style.less
添加以下代码到你的HTML的<head>中:
<link
rel="stylesheet/less"
type="text/css"
href="styles.less">
<script
src="less.js"
type="text/javascript"></script>
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/
