尚硅谷前端基础 (126)

好，这节课我们来进入一个新的阶段啊，我们来讲一个新的东西，零九我们叫做一个less啊，它基本上是它就是一个这个全新的一个一个技术啊全新的技术在这里边呢，我们先来创建一个文件，我们先来一个零一，我们先说一下这个lesss的一个简介，简介这个lesss是个什么东西啊，是个什么东西，呃，我们先给它下个定义啊，简单的下个定义，诶lesss是什么呢？诶lesss是一个什么呀？诶一门我们叫做一个CSS的一个预处理语言啊预理语言，那这less什么叫预处理语言，那什么又是SS的预处理语言，嗯，现在的话简单理解，诶，Lesss是一个这个CSS的一个增强版，哎，Lesss是一个什么呢？呃，是一个这个CSS增强版，增强版，你看他这个名字叫lesss啊，Lesss less。

是什么意思啊，就是更少嘛，啊更少，所以通过我们这个lesss，我们可以什么呢？我们可以编写什么呀？诶更少的代码，诶，然后实现什么呢？诶更强大的这个，诶样式啊，更强的样式，也就是说lesss就是可能我们以前用我们这个CSS啊，可能举个例子啊，我要写十行，可能我们用上lesss以后呢，哎，我可能只要写五行就会搞定了啊，Less就是更简单，哎，写的少，它是做多多这么一个东西啊，做多的这么一个东西，那这里面我们先不讨论lesss，我们先把lesss暂时放一下，你先有一个印象，我们这时候这这几节课我们是要讲这个lesss的，也很简单，也很快啊，然后我们既然说lesss是一个CSS的增强版，那么就带来一个问题，既然lesss要对CSS进行增强，那肯定就说明CSS原本它存在有一些这个不足的地方，对吧，有一些。

多的地方，所以我们才要增强，如果CS本身已经很完美了，这个时候我们还需不需要这么一个癞子了，哎，就不需要了，所以我们先诶细数一下CSS的缺点，哎，当然缺点呀，缺点很多啊，缺点很多我们肯定不能说全了，我们只能大概数一下啊，大概数一下嗯，比如说我们先举个例子，举个例子啊，我们在这儿直接来几个盒子啊，点一个BOX1，诶点一个诶BOX1，或者我们直接创建什么呢？创建三个盒子，我们怎么创建呢？我可以直接来一个box Dollar，然后星号一个三，这个Dollar表示任意值了，乘以三就创建三个，那这样我一星号表示乘法，我乘以一个三表示什么呢？就是创建BOX1 box2 box33个盒子，你要想创建四，可能就是乘以四就完事了啊好，那这个是我们BOX1BOX2BOX33个盒子，我们写一个样式啊，我们这来一个点一个box1.1个BOX1呢Y。

字是一个100 hi是一个100，然后background background给它来一个井号一个B，这个时候呢，我们的样式我们就复制一下啊，CTRLCCTRLVCTRLV啊这个呢，是一个这个BOX2。BOX2，嗯，那这个是我们这个box box3，呃，BOX2呢，宽度也是这个，但是它就不是color这个颜色了，它是什么呢？诶它它不是背景颜色了，它是一个什么呢？它是一个color啊，字体颜色是一个这个BV对吧？所以你如果你在box字里边写几个字，它的颜色是那个绿色是吧？是那个绿色，然后再后边呢，我们再来一个这个BOX3 box3什么特点呢？诶BOX3是边块颜色，它叫做一个boulder，是一个十像素，然后是一个solid的，然后一个井号B这一保存，然后在这我们来运行一下。诶，是这么一个效果，这个是BOX1，这个是BOX2，这是BOX3，他们有一个共同的特点，诶，就是它们里边都会有一个颜色，叫做一个b fic，哎，都会有一个颜色叫做一个B，但是不同点就是box字一的这个是背景颜色，BOX2的这个是，诶这个是一个。

字体颜色，而我们BOX3的这个是一个边框颜色，他们有都是同一个颜色，但是运用到不同的位置，这东西其实很典型，你像我们之前写那个小米那个练习，小米那个练习你看。这儿是不是这么一个橙色呀，哎，当我鼠标移动以后，它这后这是不还是一个橙色啊，你包括这儿是不是也是一个橙色，哎，就说我这一个同一个颜色，它由于设计风格的统一，它可能会应用到我们的这个网页的一个不同的一个位置啊，不同的位置，但是现在我们这里边其实就会有个问题，因为这个颜色我需要在不同的位置去同时使用，那这个时候等于这个颜色我这儿要写一遍，然后这个位置干嘛呀，还要写一遍，这还要写一遍，购物车这儿我是不是还要写一遍呀，也就是说这个颜色在我的网页中，实际上我是需要反复去使用的，对吧，反复去使用的，那这个时候就带来了一个问题，诶，这颜色我反复使用，我要写好多遍，对吧，我要写好多遍，并且最麻烦的地方是什么？比如说我这个颜色有100个地方使用了，那无非你就把这个颜色使用100次就行了，对吧，但是有一天呢，我这个网站的整体风格变了。

它不再是用这个橙色了，可能我换成红色了，诶那这时候我说要改颜色呀，哎，那么这回好了，我是不是改一处就行，不是因为我有100个地方是不是都在使用这个颜色呀，那这个时候你得干嘛？哎，你得把那个100个使用这个颜色的地方全都找到，然后一个一个的给它改过来，那我们想一下，那这样是不是就很麻烦呀，诶很麻烦，所以这个时候我们就需要一个一个东西，一个什么东西呢？一个可以先把这个颜色给存起来的东西，诶把这个颜色给存起来，存起来以后呢，诶这个东西就变成了一个变量，比如说我就写一个X等于什么呢？等于一个这个井号，一个b ficx等于这个颜色，然后我以后再想使用这个颜色，我就直接通过什么呢？通过X去使用啊，比如说background color X，诶color X border color也是一个X，那这样他们用的都是一个X，那这个变量什么好处，诶变量的好处就是有一天我的颜色我不想。

啊，用它了，我想用橙色了，我想用红色了，那这时候我用不用一个个改去不用，因为这些地方是不是都是对这个X进行的引用啊，哎，我只需要修改一下这个X是不是后边都跟着改了，哎，这就是一个变量，那在我们CSS里边支不支持变量呢？诶很巧它是支持变量，我们这写一个H苗啊，这是我们跟标签对吧？我们可以在跟标签里设置一些变量，我们这个CSS原生它也什么呢？诶也支持我们这个变量的一个设置，怎么设置啊，注意语法，首先你先写两个减号啊，先写两个减号，后边呢是我们个变量的名字，减号后边跟着变量的名字，然后冒号，比如说我写一个井号，一个BFA，诶那么现在我就已经有了一个变量叫color啊，注意格式是固定的，前面是两个减号，后边是变量名，后边你直接写值行了，那现在就等于我设置一个变量名字叫color，然后颜色是只是一个井号变非。

那这变量我怎么用，我要用的话，我在这儿我只需要干嘛呢？哎，我就不用写它了，我写一个哇啊哇，就表示我要用这个变量来一个什么呢？来一个color，那这个时候表什么呢？表示在这啊，我们写这个什么，哎，我要把这减号写上，在这儿就表示我要写这个什么呀，哎，我要用这个变量color的颜色，你看我写他给我写这个井号BV。效果是不是一模一样啊，哎，下边这些我都可以换成这个，我都可以换成这个，效果是一模一样的啊，效果一模一样，那这个时候你看我改变完了以后，我的网页中是没有发生任何变化呀，哎，但是这时候实际上我就是在通过这个color来引用这个颜色，诶同学说老师你这么写有什么好处，好处看着了，现在我不想用这个颜色了，我想都换成黄色怎么办？我直接把这换成FF01保存，是不是全都换了，诶改一个位置，所有的全都跟着换，这就是一个变量的好处，同理，你在这儿你是不是有一个这个有有有一个像素啊，哎，像素我们这也可以使用一个，比如说我定一个LTHLS，我写一个100像素，那同样这我可以直接换成变量啊，哇，一个这是一个LTH，我可以把这些所有的值都换成变量。

都换成变量啊，都换成变量以后，我们来看效果其实一样的，但是好处就是我想改的话，我这改一个值后边就干嘛了，就全跟着改了，懂这意思吧，哎，这就是变量的一个好处，我们维护起来使用起来会很方便啊，很方便诶你说老师这功能不是很强大吗？诶确实很强大，但是它的兼容性不是特别好，也就是说一些老版本的浏览器，像IE里边它是不支持这个玩意儿的，所以这个东西你粘进来我们来看看啊，粘到我们家一里诶。

我们不管它，其实你会发现我的IE11是不是都不支持，哎，最新版本的IE都不支持，那更别提老版本的了，所以它的兼容性不是特别好，它是一个CSS里的新特性，未来某一天它可能会有一个比较好的兼容性，但是现在它不好啊，它不好好这是一点，还有什么呢？还有啊，有的时候我们这个宽度啊，哎，我们之前像我们做那个练习的时候，我们这个奔跑的少年对吧，我们这宽度给它设置了一个256像素，这256个像素是怎么来的，256个像素我们这个是十二十二，我们是不是通过这个算出来的呀？哎，它总宽度是一五百三十六，然后呢，一共有1234566个人，那我们是不是用1536除以六，我们那么算出来的呀，哎，算是算，但是我们那个时候算，我是怎么算的，我是手动去算的吧，哎手动去算的，那我就现在就需要一个什么呢？诶有没有一个。

自动去算的东西呢，诶在我们的CS里同样也有一个叫做一个CALC，诶clc啊，这个是一个计算函数，它就是相当于是一个计算器，比如说我想算一个1000，诶1000除以二，1000除以二，那这个时候就是500嘛，我就可以直接写一个啊1000像素除以一个二，那这个时候它就会自动去给我计算这个值，哎，那1000除以二，1000像素除以二，那就是一个什么呀？就是一个500，是不是得到一个500像素，哎，那你你这看不明白，我写200除以二，那就变成一个什么呀，变成100像素对吧？这个就表示一个除法意思，你要乘法也行，也就说在这儿的话，这些值它都可以给你自动完成去计算，所以这个CLLC是我们的一个计算函数，计算函数，所以无论是我们这个clc的函数，还是我们这个杠杠这个变量，这都我们CSN里面一个比较强大的功能。但是呢，就。

不巧的地方就是它的兼容性不是特别好，兼容性不是特别好，你看这玩意儿在IE里边是不是一点反应没有啊，哎，一点反应都没有，所以虽然它能用，但是它没有一个好的兼容性，我们来看它兼容性啊杠这个变量是杠杠星这个语法，我们来看一下它的兼容性，哎，杠杠星IE全系no IE是不是no啊，哎，我们这个函数CLCLC。这一打开我们的这个函数，看一下它的兼容性，我们来看一下IE也是，哎IE还是什么呀，九以上支持对吧？九以上支持，那刚才我们试试的时候，应该只是颜色没出来，所以九以上都是支持这个东西的，但是也不是一个非常完美的一个兼容性，但是你看它也不是全支持，是不是color这个值是不是就不支持啊，哎，Color值就不值，当然color可我也不支持啊，我也不持，所以我们的这个CSS中有很多这个新的特性，但是由于我们浏览器的兼容性的问题，它的支持度并不好，那这样的话不好，就导致实际上这些东西我们能不能用，哎不能用，想都不用想，如果你想做一个兼容性好的网站，这东西想都不用想，写上就废啊，写就废，所以这个时候我们会发现有一些功能我们希望能用，我们希望能用，但是呢，我还不希望它在不同的浏览器不兼容，我希望它兼容所有浏览器，也就是他既能用，还会有一个比较。

好的一个兼容性，那怎么办呢？诶，那唯一的选择可能我就要抛弃CSS了，CSS你这么不好用，算了，我就不用你了啊，我就不用你了，哎，行不行啊嘿，对不起，抛弃不了啊，学这么长时间，你说说让你扔了，不可能抛弃，因为4SS现在使用了这么多年了啊，这么多年了，可能比你的年龄还要大，是吧，已经已经二三十年的啊，可能不到30年也得小三十年了，对吧，他时间已经是非常非常的长了，那这个时候很多有太多的网站都在使用CS，不是太多网站，每个网站都在使用CSS，你说我不用CSS给他换了，那是不可能的啊，那是不可能的，所以这个时候我们不可能换语言，我们不可能换语言，那于是就有这么一群人，他们设计了一个什么呢？诶，一个语言，哎，这个语言其实最早并不是，并不是我们前端工程师设计的，他是一个有一个语言叫做Ruby啊Ruby的工程师，因为他们那帮人，他擅长什么呢？擅长写写代码。

诶写什么，这个rub比园文代码写脚本对吧，他不擅长写CSS，所以他就希望什么呢？以写这个脚本的形式去写这个CSS，就是说我用另一种方式去写这个CSS，但是问题来了，你写的比如说啊，比如说呃，举个例子，可能啊，他们那个语法是这样的啊，他们可能更习惯是这样写，比如说我们cfi里边写一个语法，我是这样的啊，我直接点一个这个div，然后写一个大框，我写一个什么呢？我写一个这个y wid是一个100，那这个是典型的一个CS语法，但是那帮程序员呢，Rub的程序员他们压根就不习惯使用大括号，使用分号这种语法，他们可能习惯怎么写呢？他们习惯这么写，提惯这么写，哎，来一个y with，直接来一个100像素，他们习惯这么写，那这样的话其实表示的意思是一样的，但是语法完全就不一样，那他们两者的一个区别就是这个东西在我们的CSS里支持，而这个东西干嘛呢，不。

就是但是诶那帮Ruby的哥们，他就想用这种形式去写，那怎么办呢？诶，于是他创建了一个工具啊，一个工具，这个工具的作用就是可以干嘛呢？可以把这个语法转换成这种格式，也就是说我写的时候还是按照这个格式去写，但是我用的时候，我用之前先还要把它转换成什么呢？转换成CSS那种格式，懂这意思吗？哎，就像什么呀，我。

我要跟一个美国人交流，我又不想说英语，我想说什么呀，我还想说中文，那这个时候我们就需要一个翻译，我说完中文啊，这个翻译把这个中文翻译成英语，是不是得让那个美国人说啊，让美国人听，那这样我就可以用我的母语跟美国人交流，那同样程序员想用这种方式去写CSS，那写完之后他就需要做一个步骤，这个步骤我们叫什么呢？叫编译，要编译成什么？编译成CSS，然后再交给浏览器执行，懂意思吧？哎，所以这种就叫做一个预处理语言，那lesss也是这样一个预处理语言啊，预处理语言那我们说了lesss，我为它有什么好处？哎，在我们这个lesss中，哎，在我们这个lesss中添加什么呢？添加了许多的一个新特性啊，许多的新特性，什么特性啊，哎，像什么呀，像对我们这个变量的支持啊，像对变量的支持，当然我们说了原来的CSS，我们CS3是不是也支持变量啊，哎，但是它。

这个变量兼容性不好，而我们这个less它会有一个比较好的兼容性啊，像对变量的支持，对我们什么呀，诶我们叫做一个这个诶mix的一个mix的一个支持，也就是说等等等等，它会有各种各样强大的功能，总之就是什么呢？总之就是各种好啊，总之就是各种好，所以我们可以理解lesss是一个CSS，一个增强版，那less的语法呢，Lesss的语法大体上。大体上和什么呢？和我们CSS语法是什么呀？哎，是一样的语法一致啊，一致，但是会什么呢？哎，会，但是赖S中诶增添了许多我们对我们这个CSS一个扩展，这就是我们所谓的一个功能的一个增强，所以注意我们浏览器无法直接执行我们这什么呢？诶执行我们这个lesss的一个代码，要执行必须什么，要执行必须先诶将我们这个lesss诶转换为什么呢？CSS，然后再由我们的浏览器执行啊，所以你要注意它这个特点啊，所以这里边你要注意，但是问题又来了，那我们怎么样，问题就是我们怎么样能把一个lesss的代码转换成CSM呢？那我们这里边只说在我们这个Vs code里边使用，那这里边我们需要先安装一个。

点开这个扩展啊，在这我们直接搜一下有一个插件叫做一个easyless easy easy，我们直接搜一下，就是这个插件啊，就是一个easyless啊，直接空格列啊easy easyless呢，就是一个简单的一个，你看你写了auto to compile compile，就是一个编译，自动把这个lesss编译成CSS，当你文件保存的时候，所以这个时候这个东西简单，直接一安装就行啊，直接点安装，那现在插件一装就已经装好了，那我们就回到我们这儿，我们来看看Les怎么写啊，Lets怎么写，非常简单，在这里边呢，我们来直接新建一个文件夹，我就叫一个CSS啊CS啊，我叫一个什么呀，就叫CSS啊，在CSS里边这个时候新建什么呢？诶，我们叫一个style，点一个这个less啊ste，然后注意了它的名字可就叫lesss了，就不叫CSS了，然后在这里边我们可以直接来写我们这个lesss的一个代码怎么写。

它的基本语法跟CSS是一样的，所以你写的时候，你就先照CS写一下，我们直接写一个vod，一个Y100，一个100，这个是不是就是我们纯4S代码啊，诶但是问题是这个文件如果你直接交给浏览器执行，它是不认的啊，不认的，所以我们刚才不是装了插件吗？当你保存文件的时候，你只要一保存，你看在这儿是不是同时给你生成出了一个CSS文件呀，那这个文件你就可以直接放到我们这个浏览器里执行了，那这时候老师说你这同学说老师你这不是神经病吗？你写完了以后，这俩不是一模一样的吗？干嘛要麻烦还要编译一次，诶那在我们的赖S里，我们可以实现一些非常非常强大的语法啊，非常非常强大语法，比如说举个例子啊，举个例子之前我现在想干嘛呢？我想给包迪的后代设div，设置一个字体，颜色是一个蓝色，我们之前怎么写，那包迪的后代我在这还得写一个包Y来一个div，然后我们这来一个color，来一个这个red，我。

我之前是不是得这么写呀，哎，很麻烦，但是在我lets就可以，怎么办呢？我可以直接在body里边，我直接写一个div，来一个color，来一什么呢？哎，来一个right，那这样的语法在我们CSS里是不对的，但是在life里就是合法的，那这表什么意思，这表示的意思就是给body的后代div设置的字体颜色是红色，这时我们来保存一下和它的编译效果，你看是不是跟我们刚才写的那种一样啊啊写的那种一样，但是这种写完了以后，结构就比这种要清晰的多，因为我们这很明显这个div是写到body里边的，那我们就知道他们是有一个这个从属的关系，结构上就比较清晰，写的时候也比较省事啊，比较省事，但是这个只是一种语法的演示是吧，语法演示，那待会儿我们还要有更多的一个演示，那接下来你要做的事儿就是先来把我们刚才说那个easy life给装一下，尝试一下，先写一下，你就先按照我们CS的语法写，待会我们来讲lesss语法，然后关于lesss的话，我们也有一个。

的直接找到我们那个z less文档，你安装的时候还是那个步骤，这搜一下搜那个LESS1装就装上，这也比较小啊，装的也比较，这个也比较快啊，自己来自己来装一下就行了啊好，那接下来你的任务是安装好我们easyless，并且安装好我们这个less的一个文档，待会儿我们来讲我们这个less的一个语法。