less

Posted 2020-09-21

最近刚学了CSS的一种新框架，感觉在做大型网页的时候很有用。这种框架可以再WebStorm中直接运行，或者可以使用外接工具来执行，形式都一样，只不过路径不同。个人推荐用外接工具，我用的工具是koala。

首先介绍一下less的主要作用：在写CSS的时候，我们难免会遇到一些很麻烦的事，作为一个程序员，不断的重复同样的代码会显得自己很白痴，less很好的帮我们解决了这一问题，在Less中，我们可以直接定义一个对象，或者一段代码，然后当写到需要使用该数据或者语句的时候可以直接调用。

具体用法：首先，创建一个.less文件，然后如果定义一个对象可以这样写：@width:200px;首先‘@’必须有，代表的是定义一个对象，然后后面的是命名和具体数据，当我们对其进行调用的时候，可以直接这样写：#head{width:@width};这样些的意思就是代表@width=200px，在后面如果有相同的数据的时候我们就可以不用写200px，而是直接用@width来代替，并且这对于我们进行后面的改数据也有很好的帮助，我们可以直接把@width:200px；改为@width:100px/300px...后面如果用到的都一样改了，不用一个一个的找数据了。然后是对一段代码的定义，具体写法为：.set-in(@width:200px;@height:200px){width:@width;height:@height;};首先，‘.’是必须要有的，当我们再使用的时候可以直接调用，例如：#dic{.set-in}。这样就行了。还有一个用法也很叼，我们在写代码的时候，为了便于检查和修改，要把每个位置的关系都要写的很有结构性，例如在同一个div中，我们在对div中的子元素进行描述时，必须不断的重复#main_id这一句代码，所以我们就可以使用less框架的另一个很好的用法，能写出很有结构的代码，例如：

<div id="main">

　　<div id="div1">

　　　　<p>less框架哪家强</p>　　

　　</div>

　　<div id="div2">

　　</div>

</div>

这段代码中，我们对main进行描述时，就要不断的写#main而且光从代码中，我们很难直观看出其中的关系。在less中，我们可以直观的表达出其中的关系：

#main{

　　width:xxx;

　　height:xxx;

　　#div1{

　　　　width:xxx;

　　　　height:xxx;

　　　　p{

　　　　　　color:xxx;

　　　　}

　　}

　　#div2{

　　　　width:xxx;

　　　　height:xxx;

　　}

}

这样是不是很有结构呢。当然less还有很多其他强大的功能，但是我觉得，作为一个前端工程师，学会这些也就差不多啦。

当然，当写完这些代码以后，如果WebStorm中没有对应的插件是不能直接执行的，在WebStorm中要首先将其转换成.css文件类型才能执行，而我使用的koala需要手动将less文件添加到其中将其转换成css文件，然后再将其放入WebStorm中才能执行哦。