70.尚硅谷_less_less混合.wmv原创

OK啊，那我们来看一下，好，刚刚我们讲了less里面最基础的吧，是不是我们说less里面的注释啊，Less里面的变量。没有平啊。没有平，没有平，大家都好安静啊，现在。嗯，应该现在应该有了吧啊。好来看一下啊，刚刚我们说了一些。卡住了。现在呢，OK啊好，我们刚刚说的什么啊，介绍一下less啊，说的less的编译工具啊，两种编译形式吧，一种通过嵌入我们检S脚本的形式，一种通过考拉是吧，然后输了less里面的注释，输了less里面的变量，输了less现在规则，现在我们说一个狠的。混合啊，看一下什么叫less混合，这里好，因为这个混合这个东西蛮重要的，那我就单独懂吗，在里面弄一个零六。

好，也就是说以后我们写项目时候的话，肯定会要到混合，什么叫混合？好，照样还是拿我们垂直中的例子来举TRCTR2B好，那这里面我们搞一个CS的文件。好，我们从普通混合开始讲起，什么是普通混合？OK，离啊，普通混合，OK，好，普通混合是个什么鬼呢？好，来看一下，我们把之前那个less文件拎过来一个吧，CR c OK controlr b OK，零一加。OK，那普通和你们应该去拿什么csi里面什么零一.css吧，是不是？只不过现在还没定义好，考拉又睡着了，打开。

好了啊。OK，把这个CS文件给它干掉是吧，把这个CS文件重新。拎进来刷一下是不是OK，看我们是不是就出来一个0.3加上，那其实考拉里面还给我们提供了一个功能啊，大家看。嗯。有设置吧，OK，我们来点它这边出来个设置啊，我们看这个输出方式是不是normalva，你可以点comp啊执行编译，看最终输出结果什么样的，只有你啊，是不是给你压缩了啊，这是可以压缩的对吧？OK，那一般我们压缩看一下啊，一般我们不会用考拉来压缩啊，OK，自行编译好，一般考拉的话还是干嘛，以后是不会用的啊，只不过现在我们还没有学no的。没有学noe，没办法，只能用考拉，学了漏了之后啊，我们会出来各式各样的打包工具，用考拉还是很烦的，你想啊，文件拖来拖去放它，如果以后只需要你挑一个秘令，咔嚓全部把你做完，爽不爽？机洗的爽吗？OK，可是这个过程你们得有啊，来看一下。

OK，现看现在我们其实这个混合的话，需求因为不高嘛，需求是吧，来看一下现在如果我有两个呢，有两个D，这两个D我都要垂直居动，那我该怎么办。怎么写？我有两个呢，你写一个干嘛啊，比如说这个我给它干掉做什么，全部全部给它干掉，是不是外边加这个音呢，我待会水平就是吧，那是两个呢。咋想？是不是这样想？再来1.12。是不是啊，可是你会发现有好多重复代码。是吧？是不是在哪来看一下，可是这样编行不行啊看一下。来保存一下，应该就给我定义吧。

走外壳底下里面这个阴到一根外壳底下的。啊。你那买的啥？我把颜色啊变是不是出错了，看一下诶，口罩怎么又没了。我可能又死了起来。刷一下不下刷一下。说一下。看边是不是没有变呀，来看一下，如果把这个颜色的话。换过来换成pink是吧，OK，这个也换成pink，走来看一下。这时候再来刷一下。执行编译榜是不是来看？OK，是不是就变异了，刚刚是不是这个银色没有，它没有给我变异啊，照讲考了考拉是不是给你报数的，不知道它为什么没有报好，来看一下，你看现在我是不是也是Y和边应该Y加的一到二，那它们俩是不是应该都是垂直最终到一块去了F上我们看一下。

玻璃，你看Y和底下一拉一在这一大二也在这么两个人在同一个位置上吧，可是我们说里面大量的代码是一的，是不是这么做最后能提取出来？是不是OK，怎么说？咋办？这个我就不要了，好吧，先说啊什么来看下，拿出来把它写成变量。封了那么多的咋整，其实跟变量差不多啊，第一个混合里面第和一点开头啊，叫居中了。是不是点居中OK项目上一个选。像不像一个规则蛮香的，只要你这些东西全部。国，CTRLCTRL。

来，这两个全部删了，OK，混合就要调用，怎么调用。你敢不敢信？来看一下，不敢信，不敢信也得信。看来。刷一下是不是变他嘛，刷下吧，要不改个颜色吧，改成第一个个吧，是不是走，你看有没有变过来。底不平格嘛，你看居居中是不是在这你看。看见没有混合什么意思啊，我是不定那个混合啊，你在这边是不是调用一思啊，相当于他会把这个混合里面这些钥式CLCL。只是只是这个过程是考拉帮你在做了，变异工具在帮你做了，你看他是不是直接给你放过来。是不是来看一下嘛。完全没问题吗？F，走，你。是不是他们俩都在整，能不能听见啊，OK，那么再来看，我们说还是有点不对劲，这个样是不应该输出。

有用吗？他。没有用啊，是不是是不是我说这个东西肯定肯定不能输出，你定义混合，你定义混合我调用时候的话，你这个混合自己不能输出吗？怎么办那个括号。找你那下面调用的时候啊，因为你现在没有传任何参数嘛，应该可以来你看。剧中有吗？这个还能被编译出来吗？还能吗？还能变到远程4S文件里面去吗？就没有了，它只在这个less文件里面才有，能不能解？OK，我们来看一下我们现在讲的是什么什么规，我们讲的混合，混合就是将一系列属性从一个规则里引入到。另外一个规则集的方式，我们刚刚讲的两个混合，一种叫普通普通混合，最终编译完是会输出到原生CS文件里面去的，可是不带输出混合什么，我们说加上话之后。

他就不会输出。能不能理解啊，OK，我们来看一下它更动态的方式。这种颜色我是不是可以不一样，宽度也可以不一样，是不是我们讲混合第三种形式带什么？参数的模格，OK，参数是不是就是变量是不是，那那怎么办。艾一个，艾特一个H艾特一个，好了，问你这是不是叫形态，你看是不是给我报错了，为什么报错？下面标的时候你没穿插，记住这不是函数，这叫混合。这叫混合，叫mix in能不理解啊？它不叫函数，只不过长得有点像函数而已。能不能理解啊，它的名字叫做。Mix啊，Mix mix in啊，它叫混合OK，那现在我们是不是传参数啊，那我在这边调的时候呢。

是不是也得填参数啊，可是我们说这是行参吧，你要用吧。BCB。CCTRLBCTRLXCTRLBCTRLXCTRLB是不是这样，是不是来看一下这里我说调用，比如说你是100PX100PX的什么粉色是不是OK，下面这个句动它告诉你什么，你是200PX200PX的深粉色1P来看一下走你。看首先混合有没有变异。没有，其实在混合调用的时候，里面的规则有没有放过来？看有没有放过来，放过来了，颜色一样吗？不一样，一个一半，一个两半。

是不是啊，看一下走音。是数，那么讲你看一个100，一个250。周，你这个是200，这个是100吗。能理解吗？好，这我们讲了三种混合，一种是什么？普通和普通有什么缺点，会编译到原原生文里去，会使我们的原生文件变得很大，我不希望这样，第二个叫不带输字混，第三个带参数混合，再看第四个带参数并且有默认值的混合，默怎么写？这边来一个。冒号，你说不能只是天使好，刚刚我们说你如果时参跟行参没有对上，你没报错。了吧，你看现在如果我只传两个参数。我说了吧，因为你的时参跟你的行参没有对上了是吧，现在我给他我认识。

10PX它也是。十点。是吧，这个颜色来一个什么默认是啊拼考是吧，来看一下现在哪怕我不出参数CTRLS有没有报错，没有，因为有不值了，看一下只你你看10S粉色啊，100PX100粉色啊，看一下只有你F色。你看这里面是不是就拿个小的，这里面是拿得大的，能理解啊，这叫什么混合，但参数并且带默认值的混合，这能不能理解，再看还。带多个参数的组合啊，我们是不是刚才已经写了，哎，是不是还叫命名参数啊，来看一下什么叫做命名参数。OK，去哪看？命名参数？命名参数是个什么鬼啊？这个要说一说，OK。

啊，这个就是我们讲的不是互通混合所有的么，混合系是吧，CTRLC，我们来看一下有个东西的秘密参数。命名。命什么命名参数这里好，看一下这个命名参数好怎么玩？好，我把这个再来复计算，CTRLCCTRLV，零二.sok，这面改成零二.cs怎么呢？好，来看一下现在我说这命密参数啊，大家看现在虽然我有了默认值是不是，可是有时候我在传三的时候，我只想指定一个高度，或者说只想指定一个颜色，其他的我使用默认值，这怎么办？比如说我只想指定个颜色是白来黑色，这么显靠谱吗？来看它怎么定义。

刷一下走你来编译一下，刷一下整体就出来，好看它怎么编译了，那这边怎么办，好慢哦，刷一下就出来了，走你看下怎么编译的这种。变成了黑色。因为你是写的第一个嘛，它就给了是吧，那什么叫命名参数呢？你在传时差的时候可以指定。C black告诉他颜色，黑色，我这个参数就是传传给怎么讲也说当行参跟13个数不匹配的时候，你可以指定这个时参是给谁的。懂不懂，这是我说想你看。变成了黑颜色啊，这里来看一下。0200参数变成了黑色，能没理讲好，知道零参数用途没有，OK，那我们到现在是不是讲了。前面六个格是不是还差一个匹配模式跟。

阿吧，是，那我们来看一下这个匹配模式跟阿到底是不是么会好，那匹配模式估计要讲一会，我们来看好关掉关掉现在应该没问题吧，OK，来看下这个匹配模式，好，那我们换一个DEMO，我们不做垂直随问大有没有用，包括三角形匹配说的是吧匹配模式。是吧？OK，怎么用玻璃去画的三角形？或者说这边我把这个改成直接写一个吧，新的的零三。文件了吧，OK03点是不是OK，比如说现在我这上面的话就是。Wipe底下的。啊，这个改成03.33，哎，这个其实是不用不用了，这么一直在加载它是吧，OK，不用了，好这里这边干嘛，我们来说div里面OK来一个class，比如说我叫三角形行不行，好没问题吧，是不是OK，问题是怎么画一个三角形啊，我们先不通过什么立刻的形式了，直接通过什么是这样的形式了，画一个三角形找啊你我想怎么花就怎么花，是不是，我就现在不管从哪给我来个三角形就行。

怎么来？宽高肯定得有，宽高都是对宽高都是零是吧，0PX。也是0PX是吧，然后呢，一点十PX实心。你看现在是不这的，说给大一吗？给个40是不是现在不是这样的，OK，我们说其实是这样的一个边框。

两个边框啊，这画了个丑啊，一个边框，诶，这还是有点丑啊，这这应该怎么画，这画粗一点，一个边框，上边框吧，OK，这是下边框。是不是左边框。有变化。是吧，我们说想画三角形怎么办？想下想怎么办，我就换这个隐藏什么。其他三个边的边框是不是透明啊？是不是这意思啊，来看怎么透明，那也就是说我们其实我这边的分开线是吧，波的什么，比如啊波。

坏吧，是吧，分别。不能是就可以直接是P。是不是的，播着干什么？的是不还啥color是吧，透明是不是OK上用是不是不是。比如说这边我来个红色，那应该这什么右，这个是上右下左吧，上右下左吧，左边有边宽应该朝右吧，来看是朝右。是不是吧，可以看下老祖宗。

看一下老鼠说你们行不行？Wrong to them。IE老祖宗了，IE老祖宗在那边。看下老祖宗发不发飙。OK，打不开IEIE这种OK打开IE6是吧，好，我把这个东西拎进来看一下。下能出来。啊，这是这是这是在这这个真是在服务器上对吧，I的可能会有这个问题，那怎么办？我们去找本地的这个文件在哪，找到PP模式吧，打开文件存在目录。OK，是不是它是吧，好CTRLC。

这个关掉。新建I6，那就打开本地的，它体现了什么？零三杠匹配模式吧，是吧，来看一下你零三杠匹配模式。真没反应。了。Con。看走，你真不让玩，是不是有报错？没有报错吧，是不是。OK，走，你那就换。

正儿八经没有。你们有没有用过？是不是不可能选择一六的。我改吧。什么？压根没有啊。打不开了吧。还在一起呢。是不是I7没问题的，其实在IE56里面是有问题的，可是我在IE他在不争气了。重新打开一下。打开这个itunes。来一六看一下给交底，再来一次。刷新一次，嗯，看我是不是钥匙里面有问题。

没有问题吧？再说一下，是没有自己办。嗯，这个可能他不认识是不是。这个选选的根本都不认识，那这样。哎，是不是出来了，刚刚这个选择题是不是A6干嘛不认识啊，能理解啊，OK，那我来个后代码，大家看I里面有没有问题啊，你看。你看里面是不是好好的，你看他想给你发表就给你发表，你该怎么办是吧？I这里面教学问题怎么解决？首先向导上来就应该开启开水。是不是overflow，为什么hand？先看能不能解决刷一下最起码被肩了I6底下一大半的问题，你overf就可以了，它会给你开启I底下的一个模型，叫做学过吧。

我不信，我不信。来看一下这个东西没学过吗？还他I6底下的BC。肯定学过，讲P时候肯定讲过海的，怎么可能不讲过海的？真没有啊，记住I16底下一半的金容性问题，你可以通过开启海德来解决。怎么开启海ta of？还就可以解决的问题了。可是你发现了吗？旁边是不是还是黑色，那怎么办？因为全的是C3的一个属性，还不支持，那怎么办？画虚线。

大家想画虚线是不是一段一段的，是不是，其实上来渲渲染的是干嘛。是没有边框的，然后是一段一段的，懂不懂一段你画虚线你来看，比如说干嘛，我这边画一个虚线什么。是CTRLC。CTRLVCTRLB看一下说下这里是就好了，能理解啊，所以说你看在我的库底下。相比是好的，所以说你想用边框画一个三角形的话，你必须得这么想。能不能理解，OK，好，那既然知道怎么用边，怎么去画三角形了，是不是OK，大家看，那现在我就有问题了，哎，这个问题就比较大了，我把这个东西拎过来，这个标标签我不要了，是不是好？Ctrl b ctrl answer走过来是不是外底下我说有一个三角形是不是好？来看下，我说把这个开起来，那是不是照样还是一个。三角形这个关掉。怎么没有啊，我没变译是不是OK，对，没编译。

好，刷一下。编译刷一下出来了是吧，刷一下看有没有有的吧，好来看一下。整点是不是出来了，OK，可是现在我说这个三角形不动它，我想画一个向上。向下向左向右，我就一直要来改啊，是不是啊，我问你，我们说我们D，比如说像减宽，减宽RY里面是不是写的超级复杂，可是你在外部调用的时候是不是特别爽，是不是？我们说组件或者说你的库定义的越复杂，业务，业务代码是不是可以选的越简单，是不是你说现在我想在我的页面上面去画一个三角形，而且这个方向。我要制定向上或者向差是吧，怎么办？好，首先先把它改成混合。是不是OK，同样了吗？我们说我们来写个混合点三角形怎么拼行一个单词。

三角形，这三角形是不是OK啊，好叫什么。叫什么？什么不管了，就是他是吧，很直接，干嘛过来是吗？三角合混怎么想不带输出的混合吧，写个写个过号吧，然后呢。怎么讲全部扔进去，颜色让他来指定艾特一个CCTRLC一个C。是不是啊，宽度也是宽度也让它来指定是一个Y是二。

Y是不是这样？下面怎么调用CTRLC乘一个40P的么？红色是不是现在页面上面应该也是一个三角形，是不是，你可以现在问你这里面这个是不是业务代码。这个是什么？我们定义的一个库，最好把它拎出去。是不是在那。能不能理解，OK，这不是业务代码啊，相当于这个相当于原生这个相当于。那么你想怎么办？我说再定一个大外面。好，叫什么T什么。及Le是不是这三三角形点，但是吧，OK，我把这个代码可出X出来，这是我的业务代码吧，好，肯定我放到了吗？这个里面来，需不需要引用，需要什么，怎么引用input。

N po I，好，记住是I input啊，不对，是硬input I pot。是不是input什么呢？Input这个什么CTRLC文件名。是不是看行不行，有没有找到找不到了，点杠是不是又报错了，来看看一下是什么。艾过的，哦，对，好像是安过的CTRL。观察上看有没有CTRL是不是没有过错了，是不是看一下行不行。OK，也可以的吧，我们来看一下现在我们编译出来的东西是什么，03年三三里面是不是还是一模一样的东西啊，能别讲，你看这些东西都是我自己定义的吧。这个能理解吗？OK，可是我们说还是不动它啊，为什么不动它，比如说下次我要换一个三角形呢。

现在这个三角形向向哪边的？向左的我一个向右的打咋整是不是干嘛，这个位置是变的是不是，那我说怎么办。怎么办？不好办了吧，是不是啊，怎么整啊，你是不是再来定义个，比如说这个叫这个什么向左的是不是，下面是不是再来写啊，这样其实稍微有点二了是吧？好，那给我们提供一个功能，大家看OK，好，我们是不是要讲什么，讲这个什么匹配模式吧，好，他给我们教练东学的匹配模式，比如说这个是这个是不是向左的，好，前面是个L，这个可以什么，这个相当于是一个标识符。那讲你在调的时候，比如说干嘛，还有来看下有没给报错没有把这个颜色方法放在方保存来看页面。

是没有任何问题啊，能不讲OK，现在是不是我调用的时候我明确了，我说这个三角形要下做。能不理解啊，那我就好定义啊，其实跟我们刚刚一样干嘛，只不过我们可以干嘛，稍微省点事了，看V。TL有匹配模式吗？这个叫什么？这个叫什么？Top这个叫什么？是不是啊来看，可是还是有好多重复的啊。咱们先不管是吧，先把这个什么东西写了吧，应该怎么讲。位置在第几位？上右下左吗？最后一个是不是因为你要向右嘛，所以说你这个变方是不是出现在左边，OK，这里LB这边呢，上右下左应该出现在第三个吧，OK。

这个应该出现在他应该出现在第三个吧，是不是他呢，第一个。是不是的，你看我在这边掉的时候，比如说我想要一个向下的。S噪音。是不是下下等，你看我想要一个。向右向。向右导教你刷一下，那就向右的是不是啊，可是我们说这里面代嘛，还是有点，你这么写跟我跟我这边加L加R加T是不是一样的。是不是我说这些干嘛，那些代码是可以复用的，这两个是不是是不也是可以用的，最晚的把它用起来。是不是啊，怎么整拿出去呗，是不是啊，CTRLC，大家看我定义个秘密一样是不是啊？OK，我说来个找你，来个lo找你。

OK，好。干掉是吧，这个也给你干掉，这个也给你干掉。这个给你干掉，这个也给你干掉，这个也给你干掉，这个也给你干掉，我在外面掉的时候怎么掉，我是不是掉一次他。再掉再掉，食堂可不可以，也可以是不来看看行不行，换个颜色，黑色不来是吧？走，你刷一下行不行，也没问题，可是掉了两次啊。最好这个都不需要我调吧，是不是啊，那怎么整好整你在这边加一个标识符照啊。什么意思？什么你每次在调用这个红头的时候，是不这个名字，也就说你是不是一个匹配模式啊，我们讲什么，我们在讲什么匹配模式啊，你这边是不是一个匹配模式啊，那你可以怎么做，你可以在这个混合里面再去定义一个一模一样命密的混合，只不过第一个参数你要查刚材场每次调用它的时候，它会自动把这个带上。

能不讲，就每次你掉下面这个同名混合的时候，他会给你去找一个一模一样命名的混合，而且第一个参数得是按杠。他就会把这个混合给你带上，能理解，不需要你主动再去调了，能理解我的意思吗？OK，来看一下行不行。来，我再换个颜色，换成。L走，你看一下。没毛病，这就叫匹配模式，懂不懂？匹配模式里面注意我们说第一个参数可以是我的匹配符是吧？还有一个事情说什么，你在调用这个混合的时候，如果第一个参数是A杠的话，不管你调用下面哪一个混合，它都会把它。

带上。能理解吗？那这样的话是不是比较动态了，你想想啊，现在我问你这是不是相当于无几款的库啊，这是我的库代码吧，叫混合库吧，你看。我在业务逻辑里面去调的话，简不简单，只要把这个东西引进来，我调值不就行了，三角形吗？是吧，问你这是不是API。这是我自己自定义的API啊，我告诉我的下面的程序员啊，我是个小定义啊，我写了个库啊，我告诉我的程序员，你调这个混合，第一个参数算什么，第二个参数算什么，第三个参数什么，就能出现什么效果，那这是不是API，这就是API能不理解啊，OK，好，只是说你干嘛API定义的人不一样，可能干嘛，这个东西的流行度就不一样，懂不懂要这个东西，现在我写的这个东西，如果是W3C推荐的啊，我定义的这个API，那你们就要用疯了。是不是啊啊，那就不一样了，懂不懂，所以说都叫API，能理解我的意思吗？好OK，那到这一块咱们看一下还有什么没讲，我们说来看一下，普通合能讲回一下能没理讲，理解就过了，不带输出混合能没理讲。

我自己回下带参数的混合，不理解就说带参数并且默认值的混合。带多个参数的混合。命名参数。是干嘛的？行参时参个数跟行参不一样的时候，我可以把这个时差指定到那个行参上去，是不是匹配模式，现在能不能理解？是不是可以理解了，就差一个？二米是吧，OK，大家先把前七个先看一看啊，最后再花点时间把这个二讲完，OK。