less

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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中才能执行哦。

 

以上是关于less的主要内容,如果未能解决你的问题,请参考以下文章

less基础

less基础

LESS基础教程

vue项目中使用less

linux-less

2018-01-09 Linux文本文件查看类命令