尚硅谷前端基础 (128)

好，我们来继续说我们这个语法啊，刚才用这个新版的语法的时候，遇到一些小的问题，用不了啊，用不了并不是说我们语法的问题，而是我们这个，呃，在我们在我们这这这个这个这个Vs code里边，我们装的这个easy less的一个问题啊，是它的一个版本的问题，因为我们刚才也发现了，其实他这个版本的话，应该是你看他这个更改的更新的日志，他应该已经20012017年的时候才更新的，对吧？也就是说它实际上已经很久没有更新了，所以它的版本比较旧，它现在版本是多少呢？这个我们得通过它的一个。官网去查询一下，我们来看一下我能不能找到它那个链接。哦，它这存储库我们直接打开链接啊，打开它的这个gate的一个官网，它其实可以看一下它的版本，嗯，在这有一个NPM.tit我们来看一下它这个版本的话，你看这个less lesss应该还是2.7.2这个版本啊，2.7.2的版本，而我们看我们文档。

我们的这刚才我们看这个特性是不是3.0才支持的呀，哎，所以它的版本比较旧，暂时还不支持这个新的特性，所以我们用的时候，呃，暂时先注意一下它的版本问题，当然你可能会问老师，那我为什么不能用最新版呢？因为现在我们的v ES code它就支持这个版本，你用最新版你你用不了，但是你其实也可以用，也可以用，但是用起来对于我们来说现在用起来比较麻烦，嗯，其实也能讲，但是就是特别害怕讲完了以后我们把这个关注点就偏了，所以我们现在先用一种简单的方式去使用，往后我们还会介绍一些更加强大的工具，那那时候就不用考虑版本的问题了，我们用的一定是一个最新版，所以这时候你用的时候，你要注意了，它现在一个版本是一个2.7的版本，比较比较旧版本，你像你要看这是3.0的这个语法你可以知道，但是你现在在这里面暂时还用不了，后边我们会讲新版本，你像这写一个1.6，那1.6就肯定是没问题的。

第四那就更没问题了，对吧，你要注意一下它的一个版本啊，注意下这个版本好，然后的话，我们刚才说到这个变量这啊这个new的用的时候需要注意一点，就暂时这种情况下先别用了，所以你其实会发现。Vs code的话，相比其他工具来说，也算是一个比较方便比较好用的工具了，但是它还不不不足够方便啊，还是存在一些缺点啊，还是存在一些缺点，所以我们真正以后这个东西可能我们做一些简单开发，我们学习的时候可以用一下，但是我们真正以后大规模开发的时候，我们还是需要一些更加强大的集成开发工具，对吧？所以现在我们现在用这工具，我们就先将就一下，对吧，那种新语法也不多啊，大可能90%语法都支持这些语法，我们先给他，先给它忽略一下啊，但是也别也别说忽略吧，先留个印象，等我们以后去讲了新的工具，我们再说怎么去用它啊，怎么用它，然后呢，这个是我们的变量的问题，然后这下边说一个parent selects parent父，哎，这个父亲是吧，Selects是这个选择器，所以这个说的是一个复原选择器，其实很简单，就是一个什么呀，就是一个and符，And符什么意思。

嗯，按的符啊很简单，比如说吧，在这儿我写一个这个我写一个我们创建一个新的文件吧。新的文件我们来一个3TEXT3TEXT2.1个less啊点个那这里边比如说我们这写一个BOX1 box1里边呢，我写一个这个点一个BOX2，点一个BOX2呢，现在的话这两个东西很，哎，我写一个color吧，Color我们来一个red color我们来一个RA，那现在很显然这个他们两个人现在就是一个祖先后代的关系啊，BOX1是这个祖先，BOX2是这个什么呀，是一个后代，那现在的话我们要写的话，诶那现在比如说我现在用的是不是就一定是一个后代选择器啊，诶那我现在想用一个什么呢？我想用一个子元素渲染器怎么办？诶我这么写一个行不行，我写一个大于一个BOX3，我这希望用的是一个什么呢？用的是一个子元素渲染器，我们来一个color，来一个red这一保存这么写行不行，我们来看看效果，这一执行，诶这么写是不是可以直接应用到我们这个子元素上了，哎，就可以用到我们这个子元素渲氨器了啊，所以你要用。

子元素后代你就直接写了，子元素你就加上一个大于号就完事了啊，子元素你就加上加上一个大于号就完事了，好，那接着再来说啊，再来说，那现在呢，我在这里边呀，我想为我们这个BOX1啊设置一个whole box1设置一个whole效果啊，设置一个ho，那现在我想给box一来设置一个ho，我这么写一个点一个BOX1，我来一个ho行不行，行不行，我们来看一下啊，我们来一个color，来一个这个orange，我们来看看能不能生效啊豹S1HO orange我们这一看，诶行不行，对不对，哎，不对，因为现在它是不是变成了一个后代了，BOX1里的BOX1加上一个后二，而我希望的后二是不是加到这个BOX1上，而不是加给BOX1的后代BOX1上，哎，所以这个时候我们就不能这么写了，那怎么写，哎，那我这个点BOX1，我可以简化写成什么呢？写成一个and啊，写成一个and and。

改完了，我们先看效果啊，我们先看效果，那这个时候还有没有前面那个了，没有前面那个啊，没有前面个，所以这个按的符就表示什么。N的符就表示什么呢？哎，就表示我们这个外层的一个什么呀？哎，外层的一个负元素啊，负元素在这儿，注意现在我这个and是写在X个里边的，是不是写到了BOX1里边，哎，那么好，And符就表示点BOX1，就表示负外层的啊，就表示点BOX1，如果我的and符是写到box子三里的，我写到这了and符，And符冒号我也来一个，后后呢，我给他来一个这个color，我给他设置一个这个blue，设置一个蓝色，那这个时候and符代表谁？And符代表就是点BOX1大于点BOX3，所以这个时候效果就是什么呢？哎，就是点BOX1大于点BOX3，所以这个刀按的符就相相当于谁呀，就相当于你外层那个大块，外边这个东西你写到这个大块里边and的符就相当于它，你到这个大块里按符就相当于相当于它，那就是说你用完了这个按的符以后，它这个时候它就不会再去给你嵌套了，就是不会再往。

外边去给你放这个div了，不会给你嵌套了，同理你这个and符写前边写后边都行，你比如说我再写一个啊，我写一个div，诶然后空格我来一个and符，然后呢，我们来一个外来一个100，这个时候我们来看什么效果，这个我看有没有是不是就div下边的BOX1啊，诶div下边的BOX1它有没有说我在前面加一个box啊，哎，没有啊，按的符就表示我们这个外围那个啊，就表示外边那个啊啊那这里边它也会有一些例子，诶你看它写的比较比较有意思的是吧，你看这它这写了一个点button啊点button是一个类选择器，对吧？然后里边什么呢？I and-OK and-cancel on gun custom什么意思啊，那这个and就表示是点button，那所以and-OK，那就是点button-OK，所以你看它整完了以后，是不是就是点button-ok.button-can.button一个杠customer，哎，所以这个and符就表示什么呀，哎就表示外面那个，你外边是写的什么，这and就表示的是什么意思啊，什么意。

这边还有例子啊，我们就不一个个说了，我们简单过一下就完事了啊，然后再往下看的话，下边还有。

这是什么玩意儿啊，这是我们刚才说的那个东西啊，我们就我们不管它了啊，这是我们那个排序那个问题啊，就是那个那啊就是那个那个父子元素，那个祖先后代嵌套那个问题吧，不多说了，然后这个就比较有用了，叫做一个extend extend什么意思，我们来看效果啊，在这儿我来写个样子啊，我们这儿来写一个这个写一个P1，点一个P1，我们写一个样式，我写一个外来一个100HIT来一个200，那现在呢，我想写一谁呢？呃，我想再写一个点P2，点P2的样式啊，跟它一样，哎，也是Y100，然后呢，是一个这个he一个什么呢，200跟它一样，那这个时候很显然我们最直接的方式是不是应该直接点P1，点P2，我用一个选择器分组，哎，我用一个选择器分组，选择器分组也可以，但是如果是这种情况，我直接分组就行了，因为它俩一样的，但是假如什么呢？哎，我这个P2里边啊，还有一个，还有一个color red也就。

就是说它有跟它跟P一样的，还有他自己还有不一样的，那怎么办？那我这是不是还得写两个呀？哎呀，那这里边注意我可以怎么写呢？你看他这个例子，我们可以直接写一个点一个P2冒号一个EXTT这个东西叫什么呢？这个东西的意思叫做一个ex extend叫什么呢？叫扩展啊叫扩展，所以这个时候我可以直接extend点一个P1啊，点一个P1，那这样叫什么意思呢？这样叫做我这个P2对这个P的样式进行扩展，所以这个时候我们这个样式生成完了，你看自动就变成什么了，自动是不是变成了一个选择器分组这么一个效果呀，哎，选择题分组效果，那这跟直接写分组有什么区别，那在这里边我们还可以再去单独给他写一下，比如说写一个right，那这时候它的编译效果我们来看就是什么呢？哎，你看P1P2一样的写到一起，不一样的，P2独有的是不是单独写啊，哎单独写啊，所以这个extend叫做扩展。

哎，Extend叫做一个扩展，哎，这是什么呢？哎，对我们这个当前选择器，哎扩展什么呢？扩展指定选择器的一个样式，我们这儿用的是一个什么呢？我们这儿用的是一个选择器分组啊，我们这儿用的是一个选择题分组，那这个东西就非常的灵活了，比如说你不想扩展那么简单，你想扩展谁呢？你想扩展的是它的样式，那你就可以直接写，写一个什么呢？写一个点一个BOX1，然后大于一个点BOX3，那它是不是一个这个子元素元器啊，哎子元素元器，那这个时候你看它我们这个P2是不是直接写这儿来了，哎直接写这了啊，所以通过它的话，你就可以直接利用一个这个选择器分组的形式对我们这个样式进行扩展，那这样写的时候就非常的灵活了啊，叫做一个extend啊extend然后的话，我们的扩展方式，除了这样的话，我们还有一种扩展方式啊，还有一种扩展方式，那比如。

如说我这再写一个P3，那P3的话，同样我还想对P的样式进行扩展，那我这可以直接写一个P1括号，我直接写一个P1括号啊，你看效果，那这样我们P1的样式是不是在这都拿过来了，哎，那这样也是啊，我直接写一个点P1括号，这个是一个我们这叫什么呢？叫做直接直接对我们这个指定的这个样式进行引用啊进行引用，那这里就相当于什么呢？诶这里它就相当于将我们这个P1的这个样式在这儿干嘛呀，哎，在这在这里进行什么呀？进行了一个复制啊复制这个东西，其实我们应该严格来讲的话，它的名字应该叫做一个mix啊，这一个mix啊，诶mix叫做什么呢？这个叫做一个混合啊，混合也就是说什么意思呀，混合，也就是说我把我们这个P1的样式混合到我们这个P3里面了，那这时候就意味着我的它的这个样式我就不用再重新。

写一遍了，我直接给他拿过来干嘛，诶我给他直接拿过来复制就可以重复使用了，那这两种的话，其实都是扩展，都相当于是一个扩展，但是区别就是extend它是通过选择器分组的，而这个是通过什么呀，直接复制过来的，所以从正常情况下来讲的话，这种样这种写法的性能会差一点，因为你要复制嘛，复制等于你的样式就写了两遍，而我们选择题分组是不是只写了，只写了一遍呀，哎，只写了一遍，所以这种方式的话，我们也可以用，但是一般的话不会不会这么用啊，不会这么用，那要怎么用，我们来看一下啊，这个是我们介绍的extend啊，你们待会可以，待会自己再看一下，我们就不再不再多讲了，他举这个例子是非常非常的什么呀，非常非常细致，基本上涵盖了你在使用过程当中遇到的所有问题啊，可以仔细看一下，然后我们这里边往下说，我们的是这个。

叫一个。我们来看一下啊，我们那个混合这个东西应该是在稍微靠下一点，你看这是不是还是在说那个extend呀，Extend它说的是比较的细致的啊，比较细致的，然后往下我们来找一下，它后边还有一个这个这个玩意儿啊，Mixing在这儿，诶你看mixing啊混合啊，它复制什么呢？复制所有的proties到这个选择器啊，它会复制所有的proper在这选择器里，那这里边你来看啊，它的源代码，你看的实例啊，这是源代码，然后这是输出的，也就是编译以后的在哪，这是一个叫做一个mylo block啊mylo block你看它这个选择器就比较特殊了，它这个选择器是不是在后边直接写括号了，哎，直接写括号了，这种东西我们也可以写啊，给你举个例子，我这直接写一个P4.1个P4，我直接写一括号啊，你看着Y一个100HEAD，一个100BACKGROUND color background color，井号BV，那其实它也用的是一个类选择器，但是唯一不一样的是这里。

里边我们是不是没有就写了一括号啊，写了一括号，那这个时候注意啊，你看这个P4在这里边有没有，有没有出现，没有出现啊，没有出现，所以这个时候注意，我们这来说一下，我们这个使用这个类选择器时啊，选择器时我们可以什么呢？我们可以在我们这个选择器后面加一个什么呢？哎，添加一个这个括号括号，那这个时候，这个时候它实际上就不是一个选择器了啊这个时候这时哎我们实际上什么呢？实际上就是什么呀？哎，就创建了一个这个mix，哎mix mix叫做一什么呢？就是一个混合函数吧，你可以这么理解，叫做一个混合函数什么意思呢？其实啊，这是你不写括号也行，你不写括号它就有是不是就有了，哎，你写人括号呢，它就就没有就这么简单，那有什么区别，现在他也可以用，比如说我这来一个点一个屁股。

我我想要这个P4这个我可以直接去写这个点P4这一保存，我们来看一下P4这个样式，不是就在P5这复制过来了，但是P4有没有没有，所以我这么写的话，就等于什么呢？我的这一组样式，它的作用的作用就是专门用来给别人用，也就是专门用来给P5去用的，他自己用不用，自己不用，专门用来给别人做这种混合去使用的，懂这意思吧，这就是我们说的叫做一个mixing啊mixing这个呢，也是我们的一个这个less里边非常重要的一个特性，那通过它的话，我们来看一下它例子这里边我们你看他直接写了一个my in line block，哎，我的行那块，你看它设置什么呀，Display设置了一个in line block方ET设置一个零，诶，然后在这儿它就直接对这个样式进行引用啊，哎，并且它引用的时候这个括号是不是也可以省略不写呀，哎，所以其实你引用的时候你也可以不写括号，我直接写一个什么呀，点P4，诶你看是不是效果是一样的呀，哎，直接写一个点P。

四效果是一样的，所以你看引用完了以后，在我们编译后的这个代码里，它是没有这个买英line block的，哎，只有这个SINCE1，还有CC2，比如说它只是在这里两个里面进行了一个引用，并没有其他作用啊，并没有其他作用，然后呢，这下边也是一系列意思，你看这个时候它这个东西是不是就没有，诶这时候干嘛了，它这个里边没有写括号，这是作为什么呢？这是作为扩展的，扩展的时候它就是通过选择去分组去引用了，所以他在这里面也给我们介绍了一下我们这个使用的一个区别，对吧，使用区别，但是像这种情况其实更适合的是用我们这个extend，因为他这样用起来会比较什么呀，比较的省空间，省代码，代码量会比较少一下，我们这个生成的代码也会比较什么呀，也会比较的，也会比较小啊，也会比较小，好，那这个是我们说的这个简单的说了一下我们这个暗的符，我们这个复元素，然后又说了一下扩展，还有我们这个ex。

当然还有这个mix啊，这个extend，还有这个mix mixes呢，待会我们还要一些更高级的用法，但是现在还是先体验一下，体会一下，待会我们再介绍一些更高级的用法啊，我们来先听一下。