尚硅谷前端基础 (130)

好，那么关于这个lesss的语法的话，我们暂时就先介绍这么多，呃，因为它本身其实它跟我们的编程语言很相似，所以学员GS呢，这些东西我们学起来就比较轻松，但是现在的话，如果我们展开讲的话，确实会比较痛苦，并且由于现在实际上我们这个Vs code里边这个的支度它并不是特别好，所以我们关于S的东西我们就不再展开说了，然后还有一点东西我们给他补充一下。呃，补充一下，我们在这呢，新建一个文件，我们叫oth other，点一个less啊，我们创建这么一个文件，然后呢，这里边我们引入一下啊，我们叫做一个OO，呃，第一个我们要说一个什么呢？诶在我们的这里边呢，我这刚才创建了一个BOX1啊，创建div，点一个这个BOX1，创建一个这个div，然后在这我们来写一个样式啊BOX1我们这儿给他写一个啊把它运行出来。运行出来，哎，然后我们给BOX1设置一个样式，我设一个100 hi是一个100BACKGROUND color，我们给他来一个井号，一个BFV，设置这么一样式啊，一个绿色小方块，那这里边注意了，我们这块其实lights里边还有一个最强大的功能，在我们这个lights中啊，Lesss中所有的这个数值，哎，数值都可以直接进行什么呀，哎进行这个运算，所以比如说我这100，我可以写一个100加上一个什么呀，加上一个100直接做加法，那是不是变成了一个200呀，哎，那这我也可以什么呢？100减去一个这个50，那这里边它是不是直接就变成一五十，这是加单位，你前面有一个单位其实够了啊，加不加都行，那这样我们就可以做一些这什么呀运算了，那这样我们再做一些数值的时候，我们就不用再去手动算了，直接把值，把值往这一写，该是往上自己算就完事了，对吧，我们可以什么呢？哎，比如说像什么呀，哎加呀，减呀，乘啊，除啊，这些都是我们的一个基本运算啊，这个叫做加法运。

算这个叫做减法，星号表的是一个乘法，斜杠表示的是一个除法啊，我们就可以完成这些运算，那比如说高度，我们是举例子，我直接来什么呢？来乘以二，那这时候高度是不是变成200了，哎，200了，我这来什么呢？我这来一个除以二啊，那就变成了一个什么呀？哎，变成了一个50了啊，所以可以直接运算啊，直接运算后边用到的一些其他运算符，我们再去说它啊，现在先记住了啊，加减乘除，然后除了这个的话，在我们的less里，我们还可以通过这种方式，我们可以直接有有一个东西叫做一个impport impport叫什么呢？Impport叫引入啊，引入我可以直接写一个，我们来一个叫做一个3TEXT，点2.1个less，那这个什么意思啊，这写分号是吧，写一个分号，这表什么意思呢？诶你看我整完了以后，你看我这个绿色是不是过来了，我一入是不是也会变样式了，哎也会变样式了，所以这个叫什么呢？Imp的用来引入用来，哎将我。

我们这个其他的这个lesss，诶引入到什么呢？诶引入到我们当前的这个lesss中什么意思？你现在看我引ose的是谁，3T2.lesss，那就相当于什么呢？把我们这个3T2.lesss里边的东西ctrl a全选CTRLC，然后干嘛呢？CTRLV给它粘这的，这是等价的，是一模一样的，就相当于把它里面代码复制粘贴过来，所以现在你看我CS里面东西是不是会编辑的特别多呀？哎，因为它包含了我们的那个other，那个S，那个那个三二那个S，还有OTHERS2个东西，所以就会东西会比较多，所以就等于我们通过这个引po的可以把多个less文件给他干嘛呢？给它进行合并，哎同学说老师，那这这有什么用啊，哎，这个作用就非常大了，通过这种方式，我们可以对我们的lesss文件做一个模块化的一个处理，什么叫模块化处理？我可以同时创建多个Les文件啊。

比如说我创建四个Les文件，每一个Les文件都有它自己的功能，比如说第一个Les我就负责定义变量啊，第一个我就负责定义变量，第二个呢，诶，我就负责定义一些动画效果啊，动画效果，第三一个呢，诶我可能就负责定义一些我这个布局相关的东西，诶然后第四一个我就负责对他们进行整合啊，进行整合我分成一个一个模块，诶同学老师你分成一个模块，一个模块有什么好处啊，哎，方便我们的维护啊，变量都在第一个里面，动画都在第二个里面，哪个出问题了，我是不是直接去哪个里边找就行了呀，哎，方便我们的一个后期维护，举个例子，我们之前我们是不是用过那个，哎，其实不是之前了，我们一直在用我们的那个那个那个放S对吧，我们那个图标字体，图标字体的话，我给你打开我们来看看啊，我们解压一下，其实你会发现它里面的结构就很复杂啊，就很复杂，我们点开一个看看。

你看它里边有一个文件夹叫什么？哎，就叫做一个lesss lesss里边放的就是什么，放的就是lesss所编写那些代码，你直接点开里边是不是一堆什么各种各样的一个license文件呀，哎，各种各样的license文件，其中我们来看啊，比如说我们有什么呢？诶有这么一个mixing，哎，Mixing里边肯定你打开，打开以后里边肯定是一堆的什么这种函数是不是我们这个混合函数啊，哎，你看这里边是定义的什么呀？哎，各种各样的东西吧，是吧，混合函数一系列的东西，然后呢，还有一个什么呀，还有一个我们这叫做一个variable variables我们也是直接打开wi boss里边定义就是什么，哎，定义的就是所有的变量，所有变量都在这定义，然后你要想改变量，你是不是直接去这里边就是维护就行了，哎，所以这些lesss每一个lesss都有每一个lesss自己的作用，我们在改的时候可以直接去定位到你想改的那个。

你想改哪个就去哪里面，直接改赢了比较好方便，对吧，但是反过来说，如果你把这些东西所有的文件写到一个大的文件里，那么们维护起来是不是就会很很痛苦了，诶很痛苦啊，所以这个是我们lesss的一个，这个等于是一个模块化，我们可以通过什么呢？我们可以通过这个imp po的将不同的文件干嘛呢？诶引入到我们当前的一个项目中，哎，我们可以啊，可以，哎通过我们这个iport啊iport哎来将我们这个不同的，将我们这个其他的这个lesss，诶引入到我们这个什么呢？哎，当前的这个lesss中啊，当前let中可以对它做一个这种模块化的处理啊，模化处理好，这个是我们补充的时候要说的第二个问题，然后再来说第三个问题，第三个问题也是一个比较重要的问题，那就是我们调试的问题，即使我们写完lesss，我们是不是也得它也会出错对吧？我们写的时候肯定也会有问题，有问题我们就要调试。

啊，我们调试了一个最常见的手段，就是我们其实经常会直接去干嘛呀，诶去查看我网页代码，我是不是想看看网页里面的样式，哎，比如说我想看我这个body的样式，Body的样式我看这了，这设置了一个背景颜色是什么呀？是一个BFV，那这里边他给我写了第几行，第44行对吧，第44行，那这时候我就改一下吧，那这时候注意了，你说我要改的话，我是改的这个R字点CSS还是改的这个less。

我要改的是谁？我应该改CSS吗？这CSS注意我们是不动的，因为这个文件是不是通过这个CSN文件是经过lesss文件编译以后产生的呀，哎，它是经过它编译以后才产生的，那么OK，所以注意我们要改的是谁？改的是lesss文件，一定注意是less文件，但是问题来了，我这告诉我包地我是第几行设置的，第44行设置的是吧？44行设置的问题是什么呀？我这一共才几行啊，一共才11行，我哪有44行啊，没有44行对吧？这44行在哪呢？这44行应该是在我们的。

Body body是不是在这个位置呢？哎，在这儿呢，44行，所以他说的这个44行是什么？是other字点CSS的44行，但是我们要改的时候，应该是改的是lesss的行，所以现在的问题是我们现在的这个文件在我们的浏览器里边，它是跟我们那个CSS文件进行关联的，所以这里边所显示的代码的所有位置都是CSS里的位置，而不是lesss里的位置，而我们要改的话，我们是要改那个lesss文件呀，所以我就需要知道我的这个代码在我的lesss里边它是多少行，对吗？诶，在lesss里它是多少行，那我怎么能知道呢？现在类你你也知不知道，你只能自己数去，那怎么能知道？那必须有一个文件，它能给我们体现出我们的CSS文件和我们lesss文件之间的一个对应关系，你得知道这个东西在我的Les文件中是第几行，那怎么能知道呢？那这个。

不是，我们就需要在我们的什么呢？在我们的这个easy less里来设置一下，Easy里面有一个配置选项，它实际上它会生成一个文件，叫做一个source map source map什么意思？就是源码的一个map，就是地图source源码，源码一个地图，这个指的就是我们CSS文件，还有我们这个lesss文件之间的一个映射关系，那这样我们再去做调试的时候，它在显示的位置就不是显示文件代码在CS中位置，而是显什么呢？代码在lesss中的位置，那这个东西我们怎么配置啊，非常简单，怎么配置啊，这是我们第一次去配置我们这个Vs code里边插件怎么配置，你把这里边的东西啊，你先给它复制一下，复制大块里边的啊，CTRLC你都给复制过来，然后点击这个设置，设置这是有一个设置啊，诶设置点设置点进去以后，在我们这儿有一个扩展，在这儿有一个扩展，扩展直接点开在扩展里。

边我们有一个easy less的conction，也就是说你要配置谁就找谁，我们找到这个easy less conviction看着啊，它就在这儿呢，下面都不是啊，就都是别的插件了，我们在这儿要配置，我们需要选中这个在S4点杰森中编辑杰森是啥？你先不管啊，先不用管，后边我们会讲，那你怎么改，首先你在这儿加一个逗号，加一个逗号，然后回车，把你刚才复制那个内容CTRLV原封不动给它干嘛呢？给它粘过来完事儿啊，粘过来完事儿粘过来以后，这三个选项就是我们lesss里边的一个这个什么呀？诶，这个就是我们lesss里边的一个这个配置选项啊，这就是我们less里边一个配置选项，我们来看一下。第一个叫做一个什么呀，哎，叫做一个这个comppress compr叫压缩，是否压缩，现在是true，你可以改成什么呀，你可以改成这个force啊，你可以改成force先这么写，然后source map source map是我们这个源码地图，问你是不是什么，是不是生成这个源码地图，我们现在是不是要改它呀，所以这就应该是什么呀，诶这就应该是一个处啊，这应该是处，然后这个是什么呢？诶这叫什么呀，是否生成这个CS文件，那这个肯定得是什么呀，肯定得是true，你不生成CS文件，你是就没有意义了，诶所以这个时候我们整完了你再看效果啊，Other c other less还是这我们重新给它保存一下，保存以后这个时候你会发现这多出来一什么other.CSS.map这是干嘛的，这个就是一个映射文件，这个文件里体现的就是我们这个CSS，还有我这个light这间一个关系，那这个时候你再去调试源码，你再看啊，我们还是看看。

速看，这这个给你显示了在哪3T2.less的一个73哈，那这个时候你直接打开3T2.less。

73号找呗，是不是正好就跟这儿啊，哎，正好跟这，所以这个时候你就可以直接对应到我们那个lesss里边那个位置啊，这三个东西啊，这两个都是true，当然这个其实也可以改成true，那这其实就是什么呀，你设置完true以后，它的效果就是它会对你的源码进行压缩，还是保存一下，你看2.3S是不是压缩以后的了，哎，压缩以后的了，但是压不压缩也没有关系了，因为这儿的话，你其实也都已经进行映射了，你看都是源码的一个位置，所以这三个的话，我们设置的时候都可以给它设置成什么呀？哎，设置成这个处就完事了啊，设置处完事了步骤我们再回顾一下啊，回顾一下先找到你这个lesss lesss下边这有一段配置文件，你给它复制一下CTRLC，诶复制中间这段就行啊，复制大块里边这段这段啊，就这段啊CTRLC复制，然后点击的是设置设置，然后设置里边有一个扩展，扩展里有一个easy less con conviction，在这有一个在三。

It点接中编辑，然后你把这段给它粘过来，三个值全都改成处啊，压缩生成这个地图，然后输出就完事了。好，那么关于我们这个lesss的所有的点，我们就先说完了，当然并不是说lesss我们都说完了，Lesss还有一些高级的用法我们还没有去涉及到，但是现在说完了，你应该至少会less的一个基本的使用了，好，我们来停一下。