74.尚硅谷_less_less继承.wmv原创

好，来我们看一下啊，看一下我们要讲的最后一点什么，Less里面要讲的最后一点，那我们的复习就已经结束了，好吧，OK，这里。好诶，D06怎么是在这边啊？没问题是吧？第七天了吗？我的天呐，日子过得好快啊，你们看到什么？从D01到D07看到什么？看到了生命的流逝，有没有OK？OK啊，我们把这个预处理这一块，呃，我们正好我们重新写吧，好吧，OK。上来先建个什么CSS文件是不是OK啊，上来先建个less文件，OK，零一杠2LESS，好，我们来看看，好我们来建一个。CSS目录。好，来看一下，比如说这边我们讲集成啊，那我来建一个文件是吧，你看这边是不是有SAS文件两种类型的SAS文件嘛，你看这边是嘛，Less文件，OK，建一个文件叫extend。

Extend，我们讲基层嘛，来看一下基层跟我们混合的一个区别，我们先来写混合啊，OK。好，来一个什么？嗯，首先写混合吧，混合我们叫什么mix in mix in是吧？OK，那我们在这里面再来个什么。CTRLCCTRLB来一个mix in点看一下混合跟继承的区别啊，OK mix e怎么写，还是垂直水平居中是不是好，我们来看看那这个垂直水平就是不是写完了是不是啊啊在考试如果再写不出来的话，是不是有点对不起我了。OK class啊，谁要是考试的时候垂直水平居中还能写错？

那我好像也没什么办法是吧，OK，阴呐，OK，比如说这什么，这是我的阴了，OK，只有你啊。就是IN2是不是啊，我跟你讲垂直水平中C的必考题啊，OK。哎，我写这个干嘛疯了是不是？OK，我们干嘛，我们去link一个。呃，Link里面选啥完蛋，直接直接让他出来好，我们说要干什么，CSS里面的什么。Mix，硬点CSS，虽然说现在没有这个东西，待会编译肯定出来了，是不是扎线？咋写正常写的，我问你，你在文件里面写原生CS的代码行不行，肯定好使啊，是不是OK，可是可是你会这么干吗？你要是这么干你干嘛是不是啊，OK，我看这个马那这种东西的话，我们就干嘛写一套呗，是不是OK底下什么外号嘛，是不是我们说应该有嵌套了吧，是不是它底底下的什么。

引导吗？是不是OK，我们说外里面要去写些什么样式。做垂直平动的话，现在我们直接用写法来写了，不通过原改了，OK，来看一下什么。相对定位不就行了吗？是不是给他一个多分，再给他一个什么Y，给个300PX还是给一个300PX嘛，是不是给他什么的吗一的。实心吗？想要他也居中点的话，马可上下为零，左右凹凸吗？底下这个依然要垂直水平中怎么办？培训什么？

为么left为零，你看这个结构清不清晰为零，什么零，OK，什么TOP0IN是不是啊OK，比如说干嘛我们说这个里面有几个。有两吧，一了一跟一了二吧，那怎么办？比如说我们这么来，OK，我来写一个杠，Ch child choice，哎，这个应该写在哪。应该。应该是写在这还是写在这想想，想想上面上面写在那里面吗？是不是因为干嘛，因为这个音呢，干嘛平级的吧，是不是OK，来看一下，我们说我说他们干嘛不一样嘛，是不是你们得不一样嘛，我说你这个Y是稍微大一点，一个V100PX下也为100PX是不是背景我们给一个平方都可啊，比如我们再来看是什么N个懂吗？那杠少加L敲一个多少，第二个是不是OK，我说你的Y还嘛不一样，喂，50P50PD不平衡，有没有看到less的强大数。

结构机其性细胞是不是，你看我说这个是外方是负极，这个是阴呐，是不是啊，这是第一个阴呐，第二个阴呐。因为点结构很清晰，那我们来看一下是不是编译一下就可以了，是的啊，OK，咋咋编译啊考拉。考拉怎么又跑了？刚不是开了吗？

好给他干掉，是不是把这个三在文件之间拖进来，你发现每次做是不是太烦了，是不是我们说很想有一种方式，你懂吗？自动的是不是OK，可能那肯定要涉及到后面的课程啊，是不是来看一下只有你。有问题啊。没问题吧，全部垂直水平居动吧，是不是OK，那把它改成混合形式应该怎么办？怎么把它凑成混合？啊，一般我们抽帧混合会这么干，这里面会建一个文件夹，叫做mix等等，比如说里面来建一个文件。叫做啊居中啊，你会发现有人真的会用拼音的，真的OK，居中好怎么写这里面。

我们说要定一个什么，定一个混合嘛，是不是一定要加括号，是不是怎么定义啊。把谁拿过来？哪块东西可以拿过来的？相同的我知道相同的。哪个东西啊，我们说最好是不是，你肯定也是要相对定位的。是不是啊，那我把这个相对定位我拿过来就行啊，比如我试一下为什么。相对定位是不是，那怎么办？后面应该怎么写？后面该怎么写，宽高，宽高这种东西是动态的吗？我写到外面吗？是不是，那怎么写。这么抽象的话可能会稍微有点难度，是不是这么抽象可能会稍微有点难度下想，嗯。

那我们暂时先不要这么抽象啊，我们暂时不把这个Y和给他什么抽象出来，我们只抽象这个什么一拿出来，那就把这些东西干么，就X直接贴到什么。这里面来。这个行不行，OK，然后我我在我的干嘛。你们去干嘛？At put put什么？什么米克斯？In底下的什么居中点？是不是OK引入进来之后，我们说这边应该怎么去掉。点居中，这样不好。最好再过就你是不就可以了，来看一下这是不是再来自动变了吧，刷一下。是吧，OK来看一下，呃，比如说我把它换一个意思吧。

嗯，这个我看成黑色吧。保存一下，看一下这个每点看是不是就变成黑色了，来看一下这个了，有没有坏掉，这个ex我们先不看这里，你看是不就过来了，能有讲OK，我们说这边我们是不是抽象出一个混合出不来是不是，我说以后用聚中的话，是不是在在这边直接就可以了，是不是，而且我们说这些东西的话也应该做成变量了。是不是啊好，怎么做成变量。这两个东西干嘛全部拎过来了。是吧，拎到哪居中点里面来是吧，怎么写？怎么想？不就直接进来吗？是不是？OK，那less这个东西语法虽然简单，可是你用起来真不一定。At。H艾特是吧，CTRLC。

昆。C。C是不是可以啊，这边调用的时候呢。应该放到哪掉了？这边吧，100PX100PX什么。什么第一批第一第一批第一拼卡。这能边加这边呢，一样吧，换成五十五十，我们换个yellow吧，啊黑色是是不是连字都看不到，嗯，BLA不看这样行不行呢，是不是，你看有没有报错，报错了，我们说这边我们定义的时候是不是一个形象列表，那是不应该干嘛传列表是不是OK。

你是不是就可以了，你看这边是不是我，你看是不是我的混合定的越复杂，我的业务代码越简单。是不是这个道理？OK，我们来看一下，是不是还给你报错。关了干嘛？我抽个空房给保存下。没问题吧？好，我们来看一下mix c是不是黄色。我写的黑的，那我写个黄的不就行了吗？是不是好，是不是就过来了，因为讲OK，那这是我们看最终编译过来的，大家看最终编译过来的东西，你看编译到原生CSS里面，是不是照样还是两幅。是不是我说如果你想做的高效一点的话，最好把这两个选择器组合起来，把这个东西定到这个组合的选择里面，我不想出现重复嘛。是不是OK，我们来看一下，我们说这种东西干嘛会让你的CSS文件就能变得太大，增加网络的负载，是不是，那我们说最好是可以把干嘛我们写成什么样一个，你说我们最好写成这样，CTRLCCTRLB。

可RLC我们要写成这样可能会比较好一点，把这个东西干嘛给它拎出来是吧？这边我也不需要这种写法的话，是不是我整个CS3的体积会稍微的小一点啊，因为我这个时候混合还少啊，混合比较多的话，是不是都是CTLC表啊，我最好最好希望你就是帮我变成这个样子嘛，可是是不是有代价的，难度上可能说微要大一点嘛，是吧，那应该咋整啊，告诉你用混合就做不了了。因为我们说混合就是clc加。CTRLV把一个规则集引入到另外一个规则集，你们讲来看，我们另外一种语法叫做。继承。OK。

OK02EXTEND1EXTEND X是不是OK来看我写GGS这边是不是没有什么，没有任何变异啊好吧，混合在S，直接拿过来，Ctrl a ctrl c是不是拿到基层里面来吧，CTRLDS是不是OK，是不是还是去调这个居中点。Less啊，是不是好OK，我们说会有问题啊，比如说这个句中的less，我先改一改中mix in是不是OK，那这个文件就给他直接。删掉，那我这个里面应该去引入居中干什么一码是吧，这这没有任何问题吧，是吧，那这边我要换成什么去引用什么居中杠1XD是不是，那我再来个什么CTRCCTRB。

居中杠。TOK，好，怎么写好？你如果想用继承的话，告诉大家你不可以带这些。参数也说继承性能上面比混合要来的高，灵活性没有混合强。你能明白我的意思吗？它是不支持这些什么参数的形式的啊，你就给我定一个class。啊，叫什么居中那么讲，那这些东西我还能写成什么，拿出去是不是咋写？OK，你看我这边是不是把这个什么ex已经什么练出来了，现在他们这边是不是要用啊，OK，我们说这个Y你看吧，我们最后这种Y写在这边，是不是我更直观一点，可以干嘛去控制它，你要写成变量的话，可能我也不好控制啊，那具体的话得看你自己的编码思路。这能理解我的意思吗？OK，那这边我来一个back pink是吧？OK，那呢？

它呢，Y为50PX，为什么50PX是不是最终呢为yellow是吧，现在是不是没有调调这个什么。居中啊，是不是怎么整看我是不是有个音呢？OK，其实可以这么写呢，后面可以跟个什么，Ex ex t extend懂不懂？Extend是个函数。啊，OK，里面可以跟一个什么点举重。点居中这是个什么意思？来看一下是不是他把一个拉直接列过来，是不是以后他干嘛再去B的时候，他会这样点居中是不是一个拉。OK，然后呢，逗号点。

然后使用一个规则集，这个规则集就是我定义在点居中里面的规则集，相当于是选择器的组合。懂吗？就内部处理的时候，他就把这个选择器跟这个选选择器加一个逗号码放到一块嘛，规则就是我定义在什么点去中里面那个规，它这个规则集嘛，懂不懂我们来看行不行吗。是不是OK，我们来看一下行不行。好是不考拉开下刷一下是吧，给来看下的么。点CSS吧，你看。点句中外底下的音，外底下的in next的一，外底下in next，二，是不是用同样的点点句中里面东西啊。是不是啊，我们看一下我们怎么写的嘛。你看是不是外底下的音呢。你看用了跟我居中一模一样的东西啊。外底下1NEXT1嘛，看我这个居住写在哪。

应该不是，你看我这个，我这个点不是写的什么，最中这块什么是不是，你看最终的时候你要外应该的应该的啊跟这个阴呐。你看他们是不是都使用到它了。你看我因为我这个阴呢，里面有几份，一份两份嘛，最终变异成这样，是不是完全没问题了。他是把选择性放到一块用干嘛。隔开了吗？选择的组合吗？他把光棍的钥匙给你吗？透露出来吗？你看下面，里面还有吗？没有吧，可是这种写法好像不太友好是吧？看下怎么办？我们说你不是平级的吗？来看一下只有你。看怎么行，可不可以啊。一样的吧，跟我刚才写法一样的吗？是不是你刚不就是在我的点一后面改搞搞了什么。平级吗？是吧，来看最终变译成什么，说一下你看点居中外底下的音呢，现在是不是就干净很多，一个是点居中，你看是不是我点居中把你外底下这个音呢，首先找到你外底下这个音呢，它不是extend的点居中吗？然后他就把这个点居中这个类跟外底下这个音呐，这也是个选择器吧，这两个选择器做成一个什么选择器啊。

组合选择器用逗号分开来，那规则用谁呢？用extend那个人不就是我在点居中里面去啊。定义的那个吗。这里面这个码能理解我意思吗？我问你它的最终的效果是不是比混合好。帮你做了抽象公共代码，全部抽了出来吗？可是需不需要你自己去设计啊？需不要你去设计啊，你得把公共代码放到什么，你得把公共代码是不是放到什么。点居中这个类里面去啊。能理解我的意思吗？说它在性能上面是不是要比混合高，可是灵活度呢，没有混合高，因为它不支持什么。

参数嘛，你看我给它加个括号行不行。Joan。有吗？有吗？没有，它是它是去继承一个类，能理解吗？你这么写定义的是一个混合，懂不懂给他干掉，你能不能理解我的意思啊，OK，那它里面还有一种语法。好，比如说干嘛我这个点居中啊。Can you see。我这个点句中CTRLC，比如它有个状态干嘛，我在HL比加后的时候干嘛，我让你的背景CGRO管全部统一变成。红色是不是OK，我们说现在你写的这个东西能我有没有继承下来。有没有没有啊，我只记我只继承一个点句中啊，所以你看最终最终边的时候有没有没有吧，可是你可以写一个语法，在你居，在你继承的时候，你把跟这个点居中class它有关的所有的东西全部给我。

继承下来，来看一下周你刷下，你看后面状态有没有下来，你看点居中后的时候，Web加后面的时候是不都变成五知，所以你加一个or的话，是不是把它什么，把它所有的状态全部。拿下来，如果你不写哦，那只找点居中懂不懂，那我只能找到这个点居中，你其他的状态我应该不管。能理解吗？OK，那看一下。看一下我用这个代码CTRL完毕这里。呃，我里面是不是拿错了，应该拿什么X ten点三三是吧，所以算下。对。CSS底下extend CSS外P底下这个阴朗和围上去是个白光的边程。

我加引号了是吧，我在哪加引号，我在这边是不是加引号了，好好加B。是不是可以啊，OK，来看一下。刷一下。这里哎，看到没有问题啊，是不是看最终变异出来这个就可以了，点居中后位上去的时候。或者说外底下点阴了后上去使用背景全部变成红色吗？没问题吧？是不是啊，他哪边有问题啊，为什么不起作用。首先yellow跟pink视频已经出来了，这些我们说编译完我们的less有没有问题啊？Let写的没问题啊，肯定没问题吧，因为我这个编译不变译不都已经出来了吗？是不是啊，看这边哪边有问题。万分底下的阴囊over的时候。

背景变成红色。想想有个问题啊，外底下的音呢，后过的时候。让他的背景变差。红色。你要谁的冰淇变成公司？是不是外后的时候让底下这个音变成红色，我这个写的是不是有问题啊，是不是啊，那我应该怎么改外后的时候底下的音呢？也就是说我这个点吗？这个课上写的有问题吧，是不是啊。应该给谁啊？这个居中我现在给了谁啊，居中在我这个点less里面嘛，是不是啊，这个给了谁啊，这个是我去input的嘛，这个是extend点吗？我是直接放到这了。是不是？那我不就是让他后悔的时候吗？是吧，这就有问题了吧。那怎么办？

应该是这么写的，外和去后边的时候，那底下的阴了吧，这肯定是没问题的，是不是找你。零二杠502-CSS底下点CCSS嘛是不是。居中后的时候。啊，我看我现在这个东西不要买，行不行就吃刷一下。怎么感觉怪怪的？焦点，来看一下这个元元素到底有没有被撑开了阴呢？伊朗外。一百一百嘛，他是什么五十五十吗？这个没问题吧，是不是啊，问题是为什么我这个后果我现在不记。

来看下我们这个后面的设计，我们说这个语法能不能懂，这个语法没问题吧，是不是，那我再来给他保存一遍，看他最终编译成这个东西应该是没问题的。X点三三，你看我编译出来东西肯定是没问题的，只不过编译出来这个东西干嘛是不起作用的嘛，是不是我是居中后面的时候，或者让外应后面的时候干嘛。让谁变是不是？和睦的时候，让谁去变呢？这能不能下载一下。嗯，想想。其实这个语法是没有任何问题吧，是吧，编译出来这个结果是没有问题的，只不过我们的设计上没有问题的啊，在居中，那我们不写居中吧，我们干嘛，我们在我我们在哪，比如说点居中的时候什么。点居中，点test啊，我干嘛？我说BA back光的红色，看它最终应该变成什么。

变成什么，我们这个CS里面，大家看是不是点居中test的外婆底下in呢，点test。懂不懂变成红颜色吗？那我说页面上面如果说它还有做test，那它应该就变成红色。是不是，所以你看看是不是。来看一下选择题。来看一下选择性最终变异成了是不是？点外点音了嘛，而且必须得是点test嘛，是吧，他的背景应该是红颜色吗。哦，这个是不是又权重更高。我们说lay的权重是多少？零点。看一下权重这款。

是属性选性的全重高还是内高，他们俩是不是一样的一样的，那它是不是写在后面覆盖掉了吧。是不是把它写到下面去看看。受不了，来看一下。哦，我的天呐，是不是啊，是不是权重的问题啊，那我们写法上面应该怎么写。你不吧，看下行不行啊，看说下说下是不肯定可以啊啊踩了一个坑吧，踩什么坑啊，选择性的坑吧，其实后的时候我们看行不行。喝的时候应该是也是可以的嘛，我自己喝的时候嘛，是不是啊，让选让变成红色嘛，是不是应该也是没问题的嘛，只有你。你看。

是不是踩了个什么坑啊，是不是踩了个选择器优，呃，生命优先级的坑啊，是不是，那我们说这种的话，你要写在这个里面的话，你就应该加杠不是不是啊，或者说你主动怎么去把这个生命运给他提上来。很难听是吧，不如直接加个什么杠零不等的，一般你写到这里面的话，你的要你要求它的权重应该是最高的。这个能理解啊，好OK，采用采用什么。优踩了个优先级的分，OK这里，那这个继承的语法能不能理解啊，继承我们说干嘛比混合的性能高，没有混合来的灵活能讲。