68.尚硅谷_less_初见less.wmv原创

对啊，我们来讲CS处理器啊，这两节课关系到你们以后写CSS代码的思路，以及以后怎么去写CSS啊，OK，照样还是规范。啊，我们说预处理器要要不要规范，要它的规范在他的官网上啊，我们先学习一个预处理器叫做。是吧？OK，预处理器总共有三种。啊，其实比较大的就是跟萨斯嘛，后来这这是一个后起之秀啊，叫style啊，这个这个这个东西是我们后期写view项目时候我们要用的预处理器啊，这个是我们后期写一个相册的时候要用的预处理器，这个less是我们写音乐台项目时候需要用的预处理器，所以说这三种预处理器我们都会用到，你会发现语法都差不多，那所以说我们先讲这一个预处理器，其他两个预处理器不会单独再拿出来讲，其他两个预处理器是直接去使用。懂不懂自己对比在语法上面有些什么样的区别，思想都是一样的，懂吧，OK，那我们现在看less OK，好，现在我打开了less的官网，问你这是不是API？

是不是？这些是不是A就是A？能不理解，这跟我们刚刚看的规范是不一样的，直播一个英文一个中文的吗？懂吗？啊，最好的东西你相信我都是英文的。啊，这个没办法你们讲啊，这是人家的母语嘛，是不是OK。好，那这个预处理器是用来干嘛的呢？好，可以关掉。预速体器是用来灌网的，好，我们首先对预输器的一个直观的一个一个一个接触啊，好，来看一下零气预速体系。好，我们讲零七杠预处理器LESS2 OK，现在我需要你们自费，我们把CS全部忘掉啊，以后都是用的套来写，OK。

来看一下CS预处理器，第一种呢？好，首先跟它有一个直观的一个接触吧，OK。比如说两个码。零啊，与less的初次邂逅是不是你看你们都邂逅割了，OK，那我们这个邂邂逅的话，我们直接从垂直水平居中开始说起好不好？来看一下这个底押。啊，那垂直于居中啊，应该大家都会写了。可是我们的写法都是一个什么样的写法？我们的写法都是通过原生来写的吧，OK，来一个死掉，OK，那这个我直接去贴了，OK，我就不要写了，直接去贴了。

CSSR。元素的垂直水平居中。好，找一个方案就行了。嗯，我找我最喜欢的吗？对，就是他。Control。C啊，这我就不写了，这个有点简单了，Ctrl b OK，大家看是不是这L的OK，我看啊，这个应该是什么。点一呢是吧，走音。没有问题，是不是OK，好，可是我们说。我们说这个写的不好，应该是是吗。底下的阴了，是不是这样写的120 OK，我问你这种形式写个一两行还好。当你删文件上百行、上千行的时候。你还能通通过CSS去观察到H里面的嵌套结构啊，还能吗？还能吗？很乱了吧，是不是我们说写学生CS是不是写到最后的时候，你要去改一个样式的话，你得找半天啊。

是不是啊，特别难受，哎，如果我能这么写，是不是就好了？你。有没有想过，如果我能这么写这边，这边为什么不能合起来？啊，先不管了，其实在根据里面应该是可以合的啊，OK，我说这样写的话，问你有没有一个层次结构。有没有，你看外底下的。云南吗？是不是好很多啊，看浏览器是不是。认吗？不可能认啊，是不是啊，那怎么办？不怎么办？不认，要么用工具来编译，要么肯定得有一个辅助手段，是不是啊？OK，看less官网。啊，现在我写的其实就是less里面一个推荐写CSS语法的结构，嵌套结构，这个嵌套结构跟你的S套嵌套结构的关系是一模一样的，那你能从CSS这个嵌套规则，你能看出来ST是怎么写的。

懂不懂，或者说下一次你在排查错误新增样式的时候的话，你能快速定位到C加三在哪边改。那你讲OK，来看一下，可是我们说你这样写不行啊。用不起来啊，是不是啊，OK，看里面怎么说。走你使用方法。他说让你去npi去装一个东西是不是OK，这种形式你们还没去弄的，那咱们暂时先不讲啊，你安装完这个命令行之后，你才可以去用这些命令行的预法，对不？其实那。Less是跑在啊。Note上面的需要note来编译，Note是我们GS以GS语言做，以你把引擎作为它主引擎的一款后台语言懂不懂你们还没学好，那我们现在不用什么弄的，那less也提供了原生GSS的一个版本，我们来看一下。

咋完？OK，大家看浏览器端的用法，这个是其实下命令行都是通过什么。服务端去跑了对吧，咱们先不管，先把用浏览器端的用法怎么办，他让你去引一个。GS吧，等GS，这个GS就是用来做编译的。懂吗？怎么办，找呗，是不是OK，那这个东西我已经帮你们下下来了，就是他clc。OK ctrl b啊，OK怎么办？OK，我们说我们在写CSS吧，是吧，这些CSS是不是需要通过一款什么。要么通过一个编译工具，要么通过命令行，要么通过这个脚本文件要去编译一次的是不是，那我问你这个脚本文件最好发来了。能放在它，是放在它上面好，还是放在它上面好？上面还是下面再给你一次，上面还是下面下面。

啊，我在写style里面的内容，这里面不会有代码的，一般说我们说如果你依赖一个S文件的话，你要把这个G文件放到上面去，现在我不是依赖一个S文件，而是我需要这个GS文件来编译他，你先得有他我才能编译吧，这个这个这个GS文件内部就是拿到所有的标签，把调标签里面的东西通过他自己的逻辑重新去编译一下。所以你这个料标签必须在这个less啊，你你这个标签必须要在这个JS文件档上面，这叫编译，它并不是依赖于它，懂吗？OK，那怎么办？那最好就写到不是后面通过什么。Src的形式去引是吧，走你。好，这边改掉，改成。S找你less里面，Less里面S现在是不是应该是可以用了，找你看行不行。

还是不行，还差一个点，你得告诉浏览器你的是less代码，你现在告诉浏览器你写的是CSS代码，然后你告诉浏览解析哦，来找你刷一下就出来了吧，其实它就是告诉。这个JS文件你得来编译我，它就是中国这个type的，并不是所有的style都需要它编译的。你如果是到CS，那原生要继续读吧，如果你是到，那我就来。有没得讲科学问题？这种编译的方式好不好？为什么不好多一个价值文件，而且我问你这叫预编译吗？我们说我们讲的什么。预处理器，这叫预编译吗？啊，这叫什么运行时编译吗？是不是浏览器干嘛通过运行Java代码去帮你做了一次修改啊。

运行时编译棒，我们希望怎么样？我们希望预编译，什么叫预编译？最终让你的浏览器读什么代码？读CSS代码，我不希望我读代码。那么讲代码再编译阶段做完。编译阶段影响你运行时间吗？影响吗？不影响吗？编译就说，哎，我这个代码我写完，我把它编译成CSS，我让你自己页面去引用不就行了吗？编译是在我开发的时候，是不是我开发人员自己自己去编译的，这跟你在代码在线上跑有任何关系吗？没有，线上跑跑的就是CS文件，只不过上线之前开发人员把文件转成了。这个时间要算到你这个应用的行程里面去吗。不要开发时间跟线上跑的时间完全是两个概念，我哪怕开发的时候，我花一天花两天去编译，你管得着吗？

我在线上跑的时候，我只需要一秒钟，可是我编译就是需要一天，能不能理解，OK，那我们来看一下怎么做。我们说最好有个工具可以帮我们是吧？OK，有什么CTRLC懂了吗？银耳使用考拉给下使用考考拉编译来OK怎么办？我说啊这边啊，我不要一个style，我不要，因为我页面最终只需要一个什么。一个CSS文件那么讲，比如说我有一个CSS底下吗？零二.css。

底下是吗？零二.css那讲，那我是不是需要一个CS掉叫。CSS，我里面需要一个什么。OK，我是应该写的是一个文件。我写一个less文件嘛，最终把这个less文件编译成CSS文件，然后我页面引用的就是个CS文件，从这个less到CSS这个过程。是我线下的编译时间，跟你线上浏览读读这个代码没有半毛钱关系，能不理解，OK，那咋整，比如说把刚刚那个代码全部拿运过来。是不是就是这些代码CTRLC贴过来，贴到什么ma里面，CTRLVCTRLS保存一下，大家看结构是不是就出来了。是不是一层点开来，知道这一层肯定是它的子元素，再点开来，前到结构是不是就出来了，好，再把它这移个请出S是不是就可以了，能不理解啊，OK，来看一下这么做，那现在就差什么，把这个文件编译成CSS文件啊，OK，好，那我电脑里面已经下过一个东西要做做。

考拉啊，考拉的地址可以打开给你们看看啊，这边我有一个。课件好，课件里面叫CS3预处理器less吧，是不是？Less是一种动态样式语言，属于CSS语处理器的范畴，它扩展了CS3语言，增加了变量函数的特性，使CS更容易维护跟扩展。less既可以在客户端运行，也可以借助notes在服务端运行。现在我们的方式是。客户端运行，学了那个之后，我们可以什么note来跑堂，懂不懂less的中文官网啊，在这两个，一个是less自己的中文官网，一个是整整站的，不是都是用来写的，所以说它在不官网当中有一个教程，你们也可以去看懂吗？OK，那我说一个less的编译工具考拉。

打开头拉。好，让他跑一会，我先把我的考拉开起来，那我的考拉在哪？在这？好，这就是考拉。OK，这是我的，好了。好，那这是考察的官网是吧，啊，其实它应该是有动画的。看到没有，考拉师慢慢过来了，这动画怎么做？哎，你们醒欢，其实啊，这个我们也会做好，你可以把它下下来，那我已经下货了，安装包待会我发给你们啊，OK，这应该比较简单吧，下软下软件这种事情千万不要再让我们交了，可不可以之后你们要下很多软件了，这不要用我们。课上之前再教你怎么怎怎么一步步点啊，啊这个自己去点啊，OK，来看一下，然后我们打开就考了，来看我们把我的CS文件直接。

扔进去。直接拖拽的形式啊，拖进来记切记拖目录，不要拖文件，OK，点击刷新，你看有没有编译出来。就变译出来了吗？OK，来看一下02.3，这不就出来了Y底下的音了吗？看我那是怎么写的，对里面的音呢？变以后呢。有问讲你说你这种嵌套，其实它就是帮你在他跟他之间加了一个空格，后代嘛，后代选择性吗。这个你最终看这个怎么加。啊，它编译成三文件的，跟这个less文件没有任何关系的，这个less文件只是提高我们的编码效率。最终跑还不如跑这个三。

有没有听讲，OK来看一下。好在那我们看那这个应该也是可以用的吧。你看是不是就可以用了，有没讲好，这是我们跟less打了一个照面，那现在我们一点点来讲less，好从他的注释开始讲起，OK。