less框架

最近刚学了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中才能执行哦。