69.尚硅谷_less_less基础.wmv原创

来走，你继续好来看一下，现在我们说let里面的主食好，CTRLCCTRLV。林珊。零三我直接叫index了。OK，为什么叫index呢？你看我现在只要换03点。C3就行了吧，是吧，来看一下，那我这边是不是得写个零三.less了，CTRLV03.less OK，那在03点量里面我做一点什么事情啊，好比如说我写点注释吧，好比如说上面我来写两个注释是不是OK啊这是。见不得人的助手是吧？OK，好，我们是什么？这是想暴露出去的。

属实，上面是大家看啊，现在我编译这个S文件，好打开考拉啊，考拉只要你开一次，然后把这个文件拖进来，我刷一下。刷一下点他干嘛去编译。编译编译。有没有编译成功，没有是不是这为什么？自行编译成功了啊，是有的吧。是是不是有的，这边好像同步的有点慢，是不是？OK来看一下03.3，你看他只给我暴露出来了这个注释吧，所以在less里面只有这种注释会会被译到C3文件里面去，你刚刚开头的注释是不会被译到C文件里面的，所以有些注释是给开发人员看的，你就用杠杠写。有些注释你想是给用户看的，你知道嘛。

杠心去写能不能理解啊？好，这里简单是不是OK，这个我给也给你们去起个名字吧。关于注释是不是OK，那再往看OK变量。变量重不重要啊，那里面肯定得有变量嘛，变量是不是我们说复用的首选就应该有变量，没有变量就不要谈复用吧，是不是？OK，咱们来看下变量。好，那变量我怎么去写CTRLC，再来一个CTRLV。零四变量。OK，那这里面来一个ctrl c ctrl d OK。零四好，怎么玩呢？零四里面大家看现在我这些零是不是都是变量啊，这个不都是什么值吧，怎么样，我说把这些零全部换成，或者说我把这个颜色我定义成一个变量是吧，你看我怎么定义at，记住let里面是用at开头的，定义变量用at开头好了。

冒号。Pink使用卡完善，看编译结果。刷一下。执行下定义。刷一下啊，可能稍微慢一点，它在变是不是出来了，看一下这个这边我们来。刷新一下是不是出来了，看零四第一遍你看。是不上来了，他是把我这个pink直接变换成这个color，想想如果这个pink这个color是我。正占的阻塞，我很多地方都要使用这个平等吗？那我以后改的话还是要一个去改样式，改一个变量就够了，这是不是我们复用了一种手段，这应该可以理解吧，OK，好，那当然变量里面还有一个东西啊，Less里面变量没有那么简单啊，来看一下。

好，那我问你，现在我是不是把一个属性值变成一个变量，OK，来看一下我们的零四，大家看我是不是把一个属性值变成一个变量，OK，我问你这种属性你是不是也可以变成变量了。OK，来看一下我什么有个变量叫做at什么N叫什么。马是不是选择性能不能变成变量。At，什么SE to，虽然说我们不这么做，可是来看一下，你看这些是不是都是别的？是吧，咋填。切记，如果你是把属性名或者选择器作为变量，在写的时候怎么曲线？At括号。S。啊，不是这个吗。嗯。懂吗？选择性呢？

一定也是加。括号的形式里面写。本来。少了一个对，少了一个井号，那我这个井号写在这边吗？直接是不是来看一下可不可以好，只要编译过一次，你在这边刷新，其实你在这边CTRLX时候就可以帮你编译了，好吗？来看一下有没有编译过来。你看我在这边干嘛，零四啊，变译变译变变异，你看或者说改一个吧，我把这个颜色改掉，我把这个颜色改成低趴。Dp pd PI是吧，来看OK，保存一下是不是就已经有了刷新了，这不就变了，那边讲一看你会帮我变译过来。马是不是也过来了啊，虽然说这种形式用的很少，可是得知道一下，如果你要把选择期跟一个什么属性你作为变量的话，调用的时候应该这么去调，在当中加一个大括号，能不能理解啊？好，这叫语法长啊，这没办法，可是这种用法我们用的很少，因为我们还是习惯性直接去写句子器跟直接去写属性名，不会把选择性跟属性名定义成变量的，懂不懂，如果你有需求需要定义了，那切记你要怎么去调。

OK，好，那这是我们说的什么？好，这是我们说的变量是不是OK，那变量里面还有一点事情就什么。那ul也一样对吧？OK，还有什么变量的延迟加载，记住CSS呢，里面的变量都是延迟加载的，好，我们来看个DEMO。啊，这个弹幕就直接去找了。Can you。好，放到这个摄像里面来吧，CTRLB变量的延迟加载，OK。

什么叫延迟加载好？大家看，现在我在外面是被。第个变量为零啊，然后我点开了是选择项啊，然后这边是不是又定个变量，你看我在哪边使用这个变量，是不是在这边去使用这变量，以及在这边去使用变量吧，首先在less里面的变量都是会计作用下。是吧，一个括号代表一个中于，一个括号代表一个中于，懂不懂，首先我们说这个括号是不是就这里面的，所以是不是要去找，去找这个变量，这个变量应该是多少。按照我们的逻辑来说，应该是二，是不是这个呢。这个变量是不是在这个块里面，跟这个块有关系吗？没有关系，好像应该是。一是吧，来看一下最终编编译成什么，刷一下。OK，这里是吧，一三往11没有没有问题啊，所以是三，为什么是三，记住在里面变量都是延迟角的，就是less里面唯一有点逻辑的地方，什么意思啊，也说我是不是要去第六行去找这个变量，它会等你这个作用于里面所有的东西全部解析完，再来看这个艾的B2是谁？

是吧，这个东西，所以它是延迟被去加载的，等它读完它才会加载这个零啊，所以这个词应该是三。那么讲这叫变量的延伸，是less里面唯一一个可能需要你去记的东西。变量的延迟加载，OK。好，有没有问题，没有问题吧，好，再来看lets中的嵌套L规则，CTRLCCTRLV，好，我们已经讲了一个嵌套规则了吧，零五嵌套规则。

好，这里CSS里面那个前端规则来看一下，这个应该改成。变量里面是不是改成零四，OK，注释里面改成零四，虽然说没有什么关系，OK看这个零五，我们改成零五是不是OK来看一下零四应该是可以用的吧。这个没问题吧，OK，我们改成零五了，OK来看一下好零五之后我们什么来写一个05点。好，这个是干嘛，大家看这是我们说什么签到规则吧，好，来看我们这个礼物里面怎么写的，好，这个把它干掉，我们写好一点，这个是。是吧，这个呢。是不是在哪，可是我们说我们不希望什么呢？嗯，大家看现在零五我们来给它编译词吧，先刷一下。

让你去执行这边。是吧，是不是出来了，OK，来看一下这个什么嵌套规则走你。没问题，是不是没有坏啊，可是他想想现在我有个需求，我说在后上去的时候把当中升本的变成粉色。怎么写来里面后上就是。是不是我问你后是不是我的一个状态啊，那我是不是应该写在它里面，是不是，那我是不应该写冒号什么。冒号ho hover它时候干嘛，白色光的是不是应该要变成另外一种颜色，比如说白色光让你变成平衡可不可以。看一下变结果吧，只要我在这边CTRLS，它就会给我去编译，是不是来看一下第给我编译成什么样了。

少了一个什么，不是多了一个什么，空格能起作用吗？不能起作用。放上去是没有任何效果的，那怎么办？我们说你不希望你你有这个空格吧，相当于我们说什么，如果你一层一层写的话，他们两层是不是父子关系啊，我不希望你们俩是父子关系，我希望你们俩。平级扣在一起加一个and。来看一下这个N代表什么？N代表你前面的垂直线，也就是外空格in捺就代表你这个N。能理解吗？来看一下最终变异成什么？看见没有？是不是当中这个空格就没了，能理解吗？好，来看一下。哎，不放上去变了吧。能不理解啊，OK，这个叫什么。来看我们讲到哪了，嵌套规则，一个是基本嵌套规则，这没有任何问题吧，父子级关系嘛，还有是N的一个使用，代表的是平级能解，那上面我是不已经讲完了，OK，那给点时间大家稍微过一过，那下面可能会稍微有点难，OK。