比CSS强亿点点的大表哥——less!

        一天不学，浑身难受。各位亲爱的小伙伴们，练习时长两年半的个人练习生小赵同志，又来和你们一起学习了！

---

        那么今天，我们就继续上次所说的，对css的大表哥——less进行学习！

        首先，我们来了解一下less，看看这个less到底是做什么的。就像大家谈恋爱一样，你不能不知道人家什么名字，上去就啃吧     ❛‿˂̵✧

---

less简介：

        less它可以帮我们把px单位转换到rem单位，也是css的预处理器。它扩充了css语言，让css具备一定的逻辑性、计算能力。其文件后缀是.less。

---

        好的，现在我们对less有了一个简单的了解，那么我们去实际操作一下，感受一下他比css强亿点点的地方。

        首先，我们先下载一个VSCode的插件——“Easy Less”。它可以帮助我们将less文件保存自动生成css文件。当然，我们在Html当中引用的还是css文件，而不是less文件（less文件不被浏览器所识别）。

        接下来，开始操作吧！<(￣︶￣)>

---

一、less运算

        我们在less中可以进行运算，这个大家可以去动手试一下。老规矩，我们先上代码！

        大家看，左边是我们的less文件,右边是根据less生成的css文件。从图中我们可以看到，在less文件中写下运算过程，css文件就会自动算出结果并生成，这点是不是非常方便呢？

        ๑乛◡乛๑

        在less运算中有一些需要注意的地方，我给大家写一下，避免大家在操作的时候踩雷。

less运算注意点： 

        1.less计算时，结果以计算时第一个单位为准

        2.运算符之间以空格隔开

        3.一般转换rem值，之前的值不带单位，后面的值加上rem

        4.计算要按照先乘除后加减的顺序

        5.除法比较特殊，有两种方法。我们这里推荐带括号的使用方法，一定要带括号哦！

         (ง •̀_•́)ง 

---

二、less嵌套

       我们之前在写css嵌套的时候，可能会因为粗心大意，把类名写错啊、给的权重不够等一些问题，从而导致我们的css样式不生效。

       哦吼！！！ 我们的less嵌套可以快速生成后代选择器，而且会尽量避免样式冲突，非常方便，非常好用！下面就给大家展示一下！

        首先，他的语法是这样的：

                        .父级选择器{

                                  //父级样式

                                 .子集选择器{

                                          //子集样式

                               }

                         }

怕大家看不明白，整个图片吼~

 

 大家可以按照语法，自己去试着练一下。我们老规矩，上代码！

 

        大家可以看到啊，以前我们用css来写后代的一个属性，需要选择多个类名；现在我们使用less，只需要去套娃，一个大的花括号去包小的花括号，生成的代码都是一样的，但是减少了出错的概率，非常方便，非常好用！

        在这里我们学习一个符号——“&”，这个符号代表什么意思呢。咱就是说，并不生成后代选择器，他代表的是当前的选择器，通常用来配合伪类或伪元素使用。具体的差别，大家看代码！

乍一看，有一点点麻烦，但实际上，他确实有点麻烦，但是这样最不容易出错，而且，你不觉得这个&符号，很可爱吗？？？(o゜▽゜)o☆

---

 三、less变量

        变量这个词一出，大家首先想到的是什么？？？是计算机语言吗？？？不！！！是被数学函数支配的恐惧！！！

变量的说明：

        1、变量相当于一个容器（盒子），可以储存数据。例：x=1，x就是变量，储存了1这个数据；

        2、变量的作用在于方便维护和管理（给相同样式的内容定义一个变量，在修改维护时，只需要修改定义的变量）

         那么我们的变量这么奥里给，应该怎么使用呢？下面给大家展示变量的使用方法。

变量的使用方法：

        First        定义一个变量，@+你独特的变量名：属性值；

        Second        直接在css中使用，属性名+变量名。

        是不是非常简单呢！大家来尝试一下吧！老规矩，上代码！

         嘎嘎好使，嘎嘎好用！！！

---

四、less文件的导入与导出

        最后一个内容了，小伙伴们，坚持一下~

        我们在开发网站时，会用link标签来引入公共样式，那么我们现在学习了less，应该怎么将其公共样式引入到网页呢？

        首先，我们要将写的less的公共样式导入到一个less文件当中，然后也是用link标签引入到我们的网页当中，这样的好处是减少了HTML页面的link标签数量。当然这里引入的还是我们的css文件。（less文件不被浏览器所识别，重点记住哦！）

导入less语法：

        @import  ' 文件路径 '

 

         大家多进行练习~

less的导出

         有导入，那么肯定就有导出咯！

        他来了，他来了，他带着方法走来了！！！

        以下内容太黄太暴力，所以使用图片进行展示~

 

 注意哦~  我们导入的是less文件，导出的css文件。这点大家不要记混了！！！

       

less的禁止导出

        那么有小伙伴们问了，我必须得导出css文件吗？如果我不想我做的less文件导出css文件，我需要该怎么做呢？

        哦吼！注意看！！！          

        在我们不想导出css文件的less文件第一行添加一个代码：

 //out : false

        这样就完成了！！！

        现在就把你们的手动起来，多练习几遍呐~

        我就先睡了~886~

        (∪.∪ )...zzz