尚硅谷前端基础 (129)

好，那么刚才我们这是介绍了一下我们这个and符啊，还有包括我们的这个继承extend，还有我们说的这个mixing，那像我们刚才说这些情况的话，它其实主要是适适合于我们这个ten的，用这个就是像这种写法的话，如果你用这个呃，这个mixing的话，实际上它是有点这个东西，我叫这个名也比较别扭是吧，我们就给它称为叫做一个函数吧，啊，一个函数混合函数吧，那这个这种东西我们叫混合函数，而这种东西我们叫一个扩展，像这种情况的下，像这个玩意儿我们就不适合用这种混合函数，而是应该用什么呢？用我们这个扩展去写，因为这样的话，它里边是不是会造成一些浪费，就这种的话，我就等于代码就重复去写了，没有必要，所以我们那个混合函数什么时候需要使用，我们来说一下我们的这个混合函数，混合函数啊，那像这里边我们直接写一个，比如说我直接写一个点一个这个test啊test我写这么一个类，那这里边呢，我们可以写点样式啊，写一个100。

哎，100，然后这来一个border border我们来一个一个像素，然后solid，我们来一个这个red，那像这种结构的话，我们这要用的话啊，这要用的话。它的混合函数不是这么用的，它是怎么用的呢？那注意了，在我们的混合函数中，注意哎，在我的一个混合函数中，我可以什么呢？我可以直接设置这个变量啊，怎么叫设置变量，比如说我可以写一个艾特一个A，然后逗号我写一个艾特W吧，我们先写一个W，那这个时候等于说我在这里边给它设置一个变量，叫做艾特WW，那这个时候这不是宽100吗？我就可以直接这写一个艾特W，直接写它，那这个时候我要用这个样式的话，比如说我这来一个这个来一个这个，来一个这个box啊，点一个box，或者点直接写个div，我要去引用这个样式，同样我也是点一个test，但是这个时候你这么写就不行了，你看这么写给你出这个波棱线了，告诉你这么写语法不对，为什么不对？因为这个时候它里边有一个变量叫W，而这个W的值在这时。

不是还没有确定了，所以这里你必须给这里面传一个值，所以我可以传一个什么呢？我可以传一个200像素，那这个时候这个W就是200像素，所以这个时候我们生成完这个div，你看就是一个什么呀，宽度就是一个200，所以我们混合函数的一个特点就是它里边可以直接定这个变量，那现在我在想创建的这一个盒子是不是就是一个200乘以100的一个盒子呀，那其实这样就相当于什么呀，相当于我们这块，我可以再根据我的实际需求，是不是去设置这个盒子大小啊，哎，我需要一个200像素的盒子，解接200像素，那我想弄一个高度也指定它，哎，我可以再传参数，我直接逗号一个艾特H，那你注意了，你指定几个参数，你这得传几个，你传200是不是就不够了，哎，我再来一个，来一个300像数，那这个时候我所创建的是不是就是一个200乘以300的一个盒子呀。

诶还没编译过来呢，我们这给它保存一下这再看哟。200啊，我这没改吧，你这也对它进行一个引用，I的一个H，这一保存，这一刷新，是不是200乘300啊，诶同样你还可以来指令，你可以指定，比如说我直接来一个艾特一个BG color边块的一个颜色，那在这我是不是也可以用变量啊，哎，我也可以用变量，我直接给它改成这个什么呢？改成一个艾特一个BG color BJ color，那这个时候我还可以再传颜色，我传井号B，那这个时候我们这个边框的颜色是不是就可以传了？哎，那这样的话，我们在想创建一个盒子的时候，你像这个宽度啊，高度啊，边块颜色呀，你都可以不传了，你都可以不传了，你可以直接传什么？哎，你可以直接传一个对应的一个值，你只需要把值传过去，那这些代码你是不是都可以省略不写了啊，那这样就可以，等于是我们把这些重复的代码，我们在写的时候，避免在写重复的，直接写那些不一样的重复代码，直接给他写好了就完事了啊，这是一个，然后再来说我们。

那在这写的时候，你在这儿传值，我不是这么传的吗？我们还可以怎么传呢？这种传值啊，那注意这个是我们调用，我们叫做一个混合函数，我们是按顺序传递，哎，按顺序传递参数什么意思啊，我第一个对应第一个，第二个对应第二个，第三个是不是对应第三个呀？哎，我还可以这么传呢，我还可以这么传，我直接点一个T啊，你注意啊，我传值的时候你应该不能瞎写，你说我这写一个right，我这写一什么呢？我这写一个这个这个这100PX，这写一什么呢？300PX，那这个时候你的参数的顺序是错的，参数的顺是错的，导致你这个结果是不是也不对啊，哎，不对，所以顺序如果你像这样的话，传的时候必须得是一样的，但是我还可以这么传呢，我可以这么传，我直接这来一个艾特一个BG color Co lo，然后呢，这我直接艾特一个H啊，然后呢，这我直接艾。

艾，一个W，我是把名给它写好了呀，哎，名写好了，然后这再用的时候也就不会乱了，懂这意思吧？哎，我们也可以把名写好，就说你可以按顺序传，也可以按名传啊，按名传这是一个，然后还有一点就是我们再说一下啊，我们的这个在在我们这儿在定义这个参数的时候，你注意现在我定义这三个，我定义三个我在用的时候，我就必须得传三个值，你少一个它是不是也用不了啊，哎，那这里面注意我们在定义值的时候，我还可以去给这个值去指定什么呢？默认值啊，默认值，比如说我这直接W，我冒号，我给他来什么呢？来一个100像素H呢，我来一个200像素background color，我们来一个red，那这个时候这三个值就都有了默认值，那默认值的效果就是你可以不传值了，你不传值OK，那就使用默认值，那我这传一个，比如我传了一个300像素，传一个300像素，那么OK。

Y就是300，剩下的还是使用默认值，那这个就是我们的一个mix啊，这个混合函数用起来也并不并不难啊，并不难，当然我们现在的当然它还有一些更高级的用法，我们现在就说这么多，因为这个东西再往深了说，就跟我们这个，基本上它跟我们编程语言就没有什么区别了，所以这一块我们学完GS再回来看它会比较比较容易一些，在这我们先有一个大体的一个印象啊，大体一个印象当然在我们的这个什么呀，在我们的这个。我们这个文档里，它也会有一个详细的说明，你可以直接搜一下是吧，Mix是吧，在这会一个很细说明，可去阅读一下，如果你更感兴趣，如果你对一些高级用法比较感兴趣的话，你可以去看一下，然后在我们的LAS里，你点开这儿它有一个分类，专门有一个栏叫做functions，这个functions里边列举的就是一些什么呢？就是我们一些长，它给我们定义好的一些这个混合函数啊，这些都是我们可以直接拿过来用的啊，比如说这个average average就是一个什么呢？就是一个平均值的一个意思啊，平均值的意思，所以这个时候你们看啊，它什么效果在这儿呢？比如说我这写一个这个SPA span的话，我想给它设置一个方size啊，方size我们设置一下啊，它里边给我们提供一个这个我们复制一下叫做一个average，叫一个平均数，它的作用是干嘛的呢？它可以给我们这个两个数之间取一个什么呢？取一个平均数，比如说写一个100，我再写一个什么呢？写一三百。

回来看效果。一百一百没写单位，100个像素，然后来一个300像素，我们来看看这样行不行，哎，那这个I位置等于什么呢？哎，那开始我还觉得这个average应该可以对什么呀，对我们数字起作用，那看来现在的话应该是average，它有一个特点，它应该是对我们这个颜色来取值的啊，Average应该是对颜色取值的，比如说它可以取两个颜色之间的一个平比值，比如我这传一个red，我再传一什么呢？我再传一个yellow yellow，那这个时候它的作用就是直接取这两个颜色，那也就是说red和yellow平均值就是这个值啊，因为颜色都能转成数字嘛，它会计算出这个两个颜色的一个中间的一个颜色啊，我再换一个啊，我再换一个red的一个，这个blue啊，我们来看一下，那就算的是一个什么呀，一个紫紫紫色的对吧，把两个颜色给算出一个这个平均值在这它有力的对吧，你看这个颜色，这个颜色诶，然后算出这么一个颜色，哎，取了一个平均值取的，呃，基本上可以是它俩一个融合啊，或者它俩一个中间的一。

颜色对吧，你看它就等于把这俩颜色是不是给给合混合到一起了，哎，平均值这么一个效果啊，平均值好这是一个，还有包括呢，我们再展示一个啊，我们就不多说了，因为这个东西挺多的，后边我们用到我们一个再说还有什么呢？还有这个叫我就有一个叫dark darken什么效果呢？Dark是一个这个加深的意思啊，加深的意思，呃，比如说我们这举个例子啊，我这拿body来举例子，我们可以可以看下效果，Body的话，我们给他来一个color，比如说来一个井号，一个bic，保存一下，我们可以看效果了。

这个是3x2.3SS啊，也就3T2的3SS，那这里边呢，我们给包迪设置了一个啊，我直接写这了，写这不好，应该是写到我们这里边啊在这啊应该是background设置一个背景颜色，这是不是变成一个这么一个绿色呀，那有的时候我们希望什么呢？哎，当我鼠标哎鼠标移动上去的时候，哎，鼠标移动上去的时候，我给它设一个大小啊外一个100%，害一个100%，我希望设置什么效果呢？当我鼠标移动到我这个body地上的时候，我可以让它变一个颜色，诶这颜色可以什么，我也不知道变什么颜色，但是呢，你就比我们现在这个颜色啊深一点，那怎么办呢？哎，我可以来一个body冒号，一个whole whole的话我们变颜色，我们先来一个background color，比如说先变一个红色，那现在我移上去以后。

包大小我们这没有设置出来100%，我们这这样再写一个啊H我也给他来一个100%，因为我们这个包的大小很显然这应该是没设置出来，所以我们这个是导致这个设置不上啊，这一保存现在是不是可以设置了，哎，现在它变成了一个红色，但是我不想变红色，我希望就是比这个BFA要深一个颜色，那我们就可以用到我们这什么呀，哎，用到我们这个dark，肯你先把这个颜色传出来，BFFA，我直接写什么呢？10%，那这样的效果就是我当我后触发的时候，这个颜色比这个BFFA加深10%，那这样。

是不是加深了，哎，你说10%不够，你可以加深一个20%，这样是不是加上了一个20%，哎，是这么一个效果100%，我们来看看。百分百就黑的对吧，加深的就变变成一个黑的了，50%吧，我们来试试啊，也就是说，哎，那你看这个东西用起来是不是就很方便呀，哎，我们就不用再考虑用什么颜色了，你直接把你心里那个百分比给它写上就可以自动变了啊自动变了所以啊，那这个就是我们这个呃，Mixing啊，我们的混合函数，并且实际上在我们的这个哎里还给我们提供了很多这种多功能的函数啊，但是这个呢，使用的话我们不一个说了，因为这样说的时间就。太长了，哎，后边我们讲完GS对这个编程语言有一个进一步的了解以后，我们还会再去回来再说这种东西，还有除了less我们是不是还有还有size呀，哎，还有一些别的这种预编译的一个语言，我们还要去说它啊，在这我们先把这个mix啊，自己找回一下，我们停一下。