尚硅谷前端基础 (127)

好，经过了我们刚才的一个感受吧，啊，其实你应该能感觉到这个less呢，实际上它就是一个特殊的一个语法啊，特殊的语法它跟我们CS的语法很接近，但是实际上对我们CSS做了很多的一个扩充，那通过这些特殊的语法，它等于是加强了我们4S的功能，但是。你如果说我想把这个Les啊，比如说我在这直接新建一个文件。新建一个文件，我们叫一个零二，我们来说一下我们lesss的一个语法点二一个N，那这个时候你说我想直接把这个lesss啊，直接引来，我直接去用啊，我们直接用这个link啊，Link我们直接引谁呢？引我们这个CSS下边一个style，点一个lesss，你引过来运行的话，它是没有任何作用的啊，它是没有任何作用的，为什么没有作用？因为这个lesss这个格式，我们的CSS它不支持，它不认识我们的浏览器，不认识这个格式，所以这个时候我们的S文件一定会有一个编译的一个步骤，它需要什么呢？需要将我们这个lesss文件转换成我们CSS，就好像是什么呢？刚才也举例子了，我们和一个美国人说话，我们用什么呢？我们用中文和美国人说话，这中文这个美国人直接拿到了，当然听不懂，所以中间我们有一个过程，我得做一步什么呀，翻译我说完了话，我要让翻译把这个东西翻译成什么呢？翻译成这个英文，然后这美国人才能听得懂，所以这个时候也是。

呀，我们lesss写的时候等于是一种语法，然后我们翻译完了CSS，是不是又又是另一种语法呀，哎，又是另一种语法，那这个时候它有什么好处，好处就是我们这个lesss用起来会更灵活一些，也就是说我们可以在lesss当中用一些很强大的功能，诶比如说像变量，诶，比如说像我们这个mixing是吧，这些很强大的一个特性，但是呢，我用的同时又不用担心浏览器的兼容性问题，因为它我用完了以后，它会给我转换成对应的CS代码，而这个代码是不是就所有览器都兼容了，哎，所以less就是一个特殊语法，那学习less的话，你像我们刚才装的那个easy less，它的作用就是给我们将什么呢？将我们这个CSS，将我们这个lesss转换为这个CSS，而我们学习lesss，那其实主要学的就是一个lesss，一个语法，那刚才这个文档也给大家提供了，对吧，你下载下来有一个less这么一个文档，然后在里边的话就会有非常非常详细的一个。

介绍啊，非常非常详细，这个文档里边有案例啊，也有这个使用方式，还有描述啊，当然也是一个纯英文的啊，你看的时候其实基本上案例就能看懂了，但是没关系，我们还要讲对吧，我们还要讲，当然这里边语法我们不可能全讲到，因为实在是太多了，对吧，我们讲一部分这个比较常用的啊叭较典型的，然后我们随着后边的用，我们随着再去给他深入去说这个东西，那这里边我们先说我们的第一个事儿啊，第一个事儿，那这里边的话，我们我们在创建一个新的文件吧，新的文件啊，我们叫做一个这个SYNTX啊，3TAX点一个这个less啊，我们来在这里边专门来讲它这个什么呀，呃，语法啊语法，那这里边注意了，你如果想让它在我们文件里生效的话，诶，你你要引入的是谁，你要引入的可不是这个lesss，而是这个什么呀，而是这个CSS啊CSS这样我们一保存，然后我们直接运行一下，诶那怎么就生。

掉了，诶你得写东西啊，你写一个样式，比如说我直接写一个body body的话，我给他来一个background color，我们给它来一个什么呢？诶来一个井号，一个BFFA这一保存，诶。哎，当然他这块我们来看一下啊，他这块等于是哦，这还引的谁啊style.css应该是我们这个S3T点4SS啊，我们这引错了，应该是刚才这改了吧。OK，我管它了啊，刚才我们引入错了，然后这个时候我们再看啊，我改个颜色，我改一个FF0改成一个黄色，这块是不是跟着跟着改了，哎，跟着改了啊，所以这个时候其实我们其实就是以lesss的形式在写这个CSS，只不过lesss的功能更加的什么呀，诶更加强大啊，更加强大，更加强大体现在哪啊，比如说我现在想写这么一个样式啊，我把它去掉，去掉，那这个时候我想写一个，之前我们举例子了，我想写一个BOX1，诶BOX1呢，我想给它设置一个background color background color来个井号B，然后呢，Box box1的后代元素BOX2，我想给它设置一个color，叫做一个green，那我就可以写什么呀，Box1.1个BOX2，然后我们这来设置一个background color background color，我们给它设设置一个green啊green，那BOX2的后代呢，诶我还想再设置一个，那这个时候可能就要这么写了啊，点一个这个BOX1，然后这来一个点一个BOX2，点一个BOX3，那这个时候可能设置一个。

Color background color，我们来一个这个orange啊，假设我们是这么写的，那这时候你会发现我写这个样式我就要写什么呀，我要写三种啊，这是第一种，这是第二种，这是第三种，那假设我还有更长的关系，那这个时候我是不是还要顺序往下写呀，哎，我要写的特别特别长，那这样的话，这个样式我们写的太多了，以后我们维护起来就会比较什么呀，比较困难啊，比较困难，所以像这种写法在我们less里可以进行简写，怎么简写呢？诶，你不是想是BOX1的后代吗？你可以在box的样式里写一个BOX2，你注意了，我这个BOX2写哪了，写到了BOX1的里边了啊里边了以后的话，我们这给他来一个background color，我给他来一个这个井号，一个FF0，那这个时候就等于是什么？诶给BOX1的后代，BOX2你还可以接着写啊，你还可以接着写，我再来一个，我来一个BOX3 box3呢，我们这来一个orange orange注意。

这回是什么关系了，这回注意，现在三和二它就属于平级了，它是不是都在一里边了，那就表示BOX1的后代，BOX2 box1的后代BOX3，所以这个语法，诶它编译完了以后长什么样了，长这样懂这意思吧，诶BOX1里的BOX2 box1里的BOX3就变成这个样子，哎，你说我想体验一三层关系，BOX2的后代，那你就在BOX2里边再写一个，比如说我再写一个BOX4，哎，我这写一个color color来一个right，那这个时候你会发现就会多出一个什么呀，哎，BOX1BOX2BOX是不是就是一个三重的这么一个后代关系，哎，三重一个后代关系，所以这个是一个最典型的一个作用啊，你看这个结构写起来就就很清晰了，我们在改的时候，我们写的时候很清晰，我们以后在维护的时候也会很清晰，但是这个东西如果你直接写到CSS里，那么对不起，他是不认的啊，他是不认的，好，这是我们简单一个介绍，然后再来说的话，还有一个东西，我们叫什么呢？这。

这东西啊，双斜盖啊，双斜盖这个是我们lesss中的一个单行注释，诶单行注释啊，也就是说这个注释中的内容，哎，注释中的内容不会被解析到我们这个CSS中，也就意味着你这爱写什么写什么，CS里面看不见，它叫做一个注释啊注释同样我们也可以写我们那个CSS里边的个注释，这也是注释啊，这也是注释，这个是我们什么？这个实际上是我们CSS中的一个注释，它是一个多行的，什么叫多行的life，这注释双斜线它只能在后边写，你这就不是注释了，懂这意思吗？它只能在它后边写，你要想第二行还是注释，你还得你还得写双斜线，那这样它才是一个注释啊，还是一个注释，而我们这个斜盖星号，它是一个CF注释，它是一个多行注释，你是不是可以写好几行啊，诶，它是一个多行注释CS的注释，那这个注释内容你看注意了，我们来看效果，这个注释干嘛是不是会产生到我们那个。

原文件就是这个文CFN文件里啊，哎，所以CF注视它会什么呢？诶，它的内容会，诶被解析到我们这个CSS文件中啊，所以注意它们两个的一个区别啊，这个是我们lesss的注释，只能在lesss里解，而这个是CS注释，你在lesss里写也行，在CSS里写也行啊两种注释，那我们在这儿的话，我们一般就用这个单行注释是吧，它这单行注释好，那这个是刚才我们说的他一个这个父子兄弟的一个关系，然后接着往下说，再往下说的话，就是一个他的最大的一个，哎，我们用的最多的一个东西叫做什么呢？叫做一个变量，叫做一个变量，变量作用什么呢？哎，我们这个在变量中可以什么呢？可以存储一个这个任意的一个值啊，可以存储一个任意的值，就像什么呀，我们写一个X等于五，X等于五，那是不是就在这个变量X里，我存了一个，存了一个五，哎，存了一个五那。

存了一个五有什么用，那以后我再想用五，我就不用再意写五了，我直接写什么呀？写X，当然你会说老师，那我直接写五不行吗？哎，那我们直接用X，我们用X及引用的好处是什么呢？在V量中可以存储一个任意的值，并且什么呢？哎，并且并且我们可以在这个需要时啊任意的什么呢？哎，任意的一个修改，哎变量中的值就是可以改，就是你说比如说我这比如说color colo啊color的话，我们这写一个red，它就写死了，永远都是red对吧，永远都是红色，但是反过来说，我这写的是一个X，它是一个X，那我X有值，X是的，那color了就是红色，X是yellow，那color了就是黄色，X是orange，那color了就是橙色，这个color的这个颜色我们是不是可以任意的修改啊，而这个red我们改起来就没有那么方便了，所以变量的最大特点就是改的时候会比较方便，那我们怎么去生明变量，我们来说一下这个变量的。

变量的一个语法什么样的，它是一个这个艾符开头后边跟的是一个变量的一个名字，所以我要想声一个声明一个变量，比如说我这来一个变量A，那我就直接艾特A，我写一个100，那现在我这个变100像素吧，那现在我就有一个变量A，这个A的值是100，但是注意这个值你在这里边是看不见的，因为这个不属于三语法，所以你是看不见，但是我们可以用怎么用，举个例子，比如说我这来一个BOX5 box5我写一个Y，我要用到一个宽度，宽度的话，我想用这个变量怎么办？那我就直接写一个艾特A，那这里边注意它的值就是这个100像素，所以你看效果，这个BOX5，这是不是编译以后的啊，我们看这个是编以后的，编译以后是不是就变成了一个100，诶编译以后就变成了一个100，那这个时候我们诶用起来是不是很方便呀？诶这100，那比如说诶像我们之前写小米那网站，它是不是整个一个。

宽度，哎，那那个宽度我们就可以设置为一个变量，然后呢，我在设置这个值的时候，我就不使用那个宽度了，而是每一个地方我都使用这个变量，那这样给我们带来一个最大好处是，当我们的屏幕宽度需要改变的时候，比如说我变成一千二了，我变成一千三了，宽度变了，我不需要把所有位置都改了，我只需要改一个位置，比如说这个艾特A，艾特A我使了，使我使了100次，这100像素我使了100次，诶那假如说后边我想都变成120像素了，诶那我就不用一个个改了，我直接把变量这个位置，这个值，这个值一改一保存，那剩下的是不是全都会跟着改呀？哎，跟着改，这是我们变量啊，当然你不一定可以只写像素，你还可以写什么呀，哎，比如说写一个颜色，哎，比如说写一个这个red，或者井号一个吧，井号一个BFV，那这样的话就是一个颜色，颜色同样也是可以这么写，我们来一个color color呢，我们就直接来一个艾特B啊注意注意都是at开头，那这样我们这。

颜色就给它设置成啊，就给设置成这个是我们说的一个这个颜色啊，就是也不一定非得是颜色啊，非得是数值，我们变量它可以是可以是任何值，比如说我是一个就是一个，就是一个内容啊，比如说艾特C，我就是什么呢？我存一个BOXX6，我存什么呀，我存一个类名，这样行不行啊，这样也没有问题啊，这样也没有问题，那现在我能不能把这个艾特C作为类名来使用呢？可以，但是作为类名来使用的时候，你需要注意，我需要怎么写你类名，但是点你得写上对吧？点你得写上，点完了以后你就不能直接写艾特C啊，不能直接写FC，你得写at什么呢？你得写艾特一个大括号C，那这样才能作为一个类名使用啊，我们来看一下啊，来写一个YY一个我写一个at特一个A，这一保存我们看效果，这样是不是就出现了一个点一个BOXX6，诶点一个BOX6啊，那这里边我们注意一下。

这个是我们创建变量，我们在使用变量时，使用变量时如果什么呢？如果是我们这个直接使用，哎，则以哎艾这个变量名的形式使用即可，哎，那我们说这句话叫直接使用，但是如果我们是什么呢？像这种它不属于直接使用，你是把它作为类名使用啊，哎，那作为类名使用，作为类名。

作为这个类名。或者什么呢？哎，或者一部分值使用时啊，使用时我们必须什么呢？哎，我们必须以这个叫做一个at大括。变量名的这个形式。十啊，所以注意一下它们两个的一个区别啊，两个区别，所以这个时候你这可就不能写艾特C了啊，你写一艾特大括C，那这样才能表示来一个变量，还有什么情况，比如说我这要设置的是一个背景图片啊，Background image background image，设一个背景图片，我们是不是要用一个URL啊，诶URL，那比如说我的路径是BOX6下边的一个1.pnd，那可能是如果我写的话，直接写的话，那是BOX6下边这个1.pnd，我是不是这么写呀？哎，那假如说我想这使变量怎么办呢？这你也不能直接写艾特C，你得写艾特大括号C，那这样才可以正常去，诶大括号C都没出来是吧，艾特一个，我们这写一个这个分号，那这里边啊，我们还得注意点，这还必须得要给它加上什么呀，哎，给它加上这个引号，哎，不加引号它也识别不出来，这样是不是才能识别出来，哎能识别出来，不加引号的话，我们来看一下吧，不加引号这个时候它是不都。

认不出来呀，哎，所以这引号呢，我们还是给还是需要得给它加上啊，给加上，所以这个时候你像这个值，它是只是作为我们这个值的一部分用，哎，一部分用的时候OK，那你也必须用这个at，然后大括号C这样写才可以啊，这个是我们的一个变量，那变量其实用起来很简单，就是你用艾特声明完了，声明完了下边就可以用了，但是其实它用的时候也会存在一些问题啊，存在一些问题，那这里边比如说是这样的，我们这艾特C完了，我们这来一个艾特D，艾特D呢，来一个这个200像素，然后呢，我再写一个艾特D，我来什么呢？我来个300像素，那这个时候就会产生一个问题，产生一个什么问题，我们现在的这个艾特D，把这写个div吧，我现在艾特D是不是有两个值啊，哎，有两个值Y，我们这直接写一个特D，那这个时候到底用哪个啊，我们的变量它是就近。

原则谁进用谁艾特地跟两个特地谁进下边这个进，那么OK，我就用什么下边这个，所以这时候就300啊，哎，300，如果你在这还有一个，我这写一个啊，艾特地来一个什么呢？来个115像素，那这个时候就用什么了，哎，就用这个115像素啊，谁进就用谁啊，谁进就用谁是这么一个啊，所以一定要注意它的一个特点，并且你的变量在使用的时候，我们来一个height height的话，我们这来一个这个，来一个这个。

艾特一个E，艾特E，但是这个时候这个E我是不是还还没写呢，我可以在下边写艾特E，我写一个335像素，那这个时候变量是不是在下边啊，哎在下边我们这一看效果，那这时候是不是335也可以写，哎也可以写啊所以注意哎我们变量，哎变量发生这个重名时啊，发生重名时我们什么呢？哎，我们会优先使用什么呀？诶使用这个比较比较近的变量啊，会使用比较近的变量，然后呢，哎我们可以什么呢？我们可以在我们这个变量声明前，声明前哎就使用这个变量啊，就使用这变量，但是一般情况下不建议这种用法，因为这种用法你先使用，再再再这么整的话，有时候你就就乱了，所以一般情况下，你像我这么写都不好，我一般情下最好这个变量啊，给它写到一起，写到一起以后的话，我们会相对来说会比较的好。

好好维护一些啊，好维护一些，那这个是我们说这些变量的一个使用方式，然后的话还有一种情况，什么情况呢？我还是写一个div啊，还是写一个div wise呢，我写一个300，然后呢，害ight呢，我也想是300啊害得我也想300，但是我这么一写的话，就就写就就就比较麻烦了，对吧？那我希望他俩是一样的，那这时候我要改的话，他俩变成400的话，两个都得改400，那现在我希望什么呢？我希望的是我的这个he值啊，He值直接去引用什么呢？直接去引用我这个wise的这个值，那这个时候我要怎么写，哎，我可以直接在这就直接写一个Dollar符，来一个这个was啊，来一个wise这一保存，你再看效果是诶这一块。

我们来看一下。这一块等于是我们的这个，他这里边是不是对我们这个样式没有去引入，没有引入成功啊，哎，没有引入成功，那这里边肯定是有一个问题，应该是我们现在这个我看一下啊，我们来看一下应该是我们这个easy的版本的问题，我们来看一下它这里面有没有给我们介绍一下它的版本。那么它这里边的话没有看看啊，它这个发布内容是一个1.44到一个这个1.1.4.5的版本，我们来看一下我们文档啊，我们看看语法有没有问题，往下找一下，我们看看这文档啊，我们看一下上边这个呢，说的是一个这个简单的一个介绍是吧，怎么写啊怎么写啊，然后呢，下边这个呢，是一个这个你看这是不是介绍我们这个变量的用法了，哎，变量用法，然后呢，下边这是把我们这个变量作为这个选择器去使用，哎，是这样的啊，都我介绍你可以自己看一下啊，你看这写一个艾特符，后边跟着一个大块，然后下边呢，这个是把我们这个什么呀？呃，变量作为图片路径使用，也得用这个艾福，并且你的引号啊，还必须得写引号不能去空缺啊，引号不能空缺，然后呢，诶你看这个我们刚才没说，你看它是不是也可以作为属性名去使用啊，哎，可以作为属性名使用，那你用的时候也是一个艾加上一个大块里边加一个这个属性名，然后呢，这个也。

看一下啊啊，这个等于我在里边，我是再声明一个变量啊，啊，再声明一个变量，先不管它了，我们往下来看，往下来看它这个用法在哪儿呢？我们找一下。

哎，在这儿呢，在这儿是不是给我们写了一个这个color的一个井号E，写这么一个，然后他这背景颜色干嘛呢，写了一个Dollar color，是不是想引引借这颜色呀，哎想使用这个颜色，然后他编译完了，你看这个是它的源码，那compels to，这是编译完了的一个结果，那这样的话，你看这个background效果是不是就跟他这个跟他这个一样了，哎跟它一样了，但是这种语法很明显，现在在我们的这里边，它并不它并不支持啊，它并不支持这个东西，待会我需要去确定一下它的一个版本问题啊，我们看一下我们这个easy less应该是你看它这还是2017年更新的，那证明它这个版本会比较比较旧，还是1.4几的，而这个是一个3.0.0的，我不知道它两个版本对得上对不上，但是很明显现在是这种语法，在我们现在这个easy less里，它并不并不支持啊，并不支持。所以这个时我们。

用easy，所以就得小心一点了，那待会儿我来，哎，我来看一下怎么去给它设置一下这个版本啊，设下版本，但是这种用法在我们新版本的赖里是肯定是可以用的啊，就是用我们这个Dollar服加上一个属性名，它可以直接对这个属性名进行引用，或者我把它这个粘过来，我们来看看行不行，也许是我写错了是吧，但是应该是版本的问题，保存一下。诶，他这个是不是粘过来同样也不行了，哎，也不行，那这个就不是我写的问题了，那就是他这个版本支持一个问题啊，待会儿我们来确认一下它这个版本如何去修改啊，好，那这个就是我们说的它的一个变量，那关于变量的一个写法呢，主要用法主要就这么多啊，我们先停一下，你自己来试一下这个变量，但是这里边我们来说一下啊，这个玩意儿，这个是我们这个新版的一个语法，那可能目前还不太支持，我先给它注掉，待会我来确定一下怎么去给我们这个easy less提升一下版本啊，我们先来听一下。