less快速入门

前端的世界出了很多框架和工具,其实冷静的想想,思维方式与后端大同小异,less的出现为了提高写css的效率。其实如果没有less,我相信也会有人去弄一个类似的工具来提高开发效率。nodejs的出现让,npm的丰富,出现了很多工具,不要被这些工具的表象迷惑。有过服务器端开发经验的人都知道,思路就是那些,基本也成了套路。当然这些东西仍然有学习的必要,因为已经有很多人在用了,圈子成熟。不用重复造轮子。今天我借助less官网学习less,快速入门下,希望给路过的人一点点帮助。

再说点,天下没有免费的午餐,less既然让我们提高了css的编码效率,其实只是让我们少写点而已,通过工具(编译器)去生成对应的css代码。就像我们之前也用代码生成工具一样。less编译器有很多,各种插件,有个客户端工具koala。这里我不推荐大家再sublime里面安装一个lessish的插件,导致编辑一个几千行的css文件非常卡顿,也可以使用grunt。

变量

使用@符号来定义变量,具有一处修改,所有使用到该变量的地方都修改,当然也有一个变量的作用域,通过{}定义,内层的覆盖外层的。变量可以进行运算。

 

demo1:

HTML:<div>div<span>span</span></div>
less:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
body{background-color: @nice-blue;}
body {
 background-color: #5b83ad;
}

混合(Mixins)

其实我理解到跟变量作用类似,可以把一个类的样式直接通过类名放到另外一个类里面

 

嵌套层级

less里面可以向写html的层级一样来写css,代替类似a b{}写法,当然还有a>b的这种写法不知道能不能做,是不是全部支持,或者比较复杂吧,这里我不去深究了,因为可以使用替代的方式来做。

 

&引用父级

demo2:

 

媒体查询特殊嵌套(冒泡)

我们使用media的时候,一般是在某一个屏幕适配条件下,多个类的样式。这里less写法是把类写在外面,媒询写在里面。

输出为:

 

不被less编译:~”anything” or ~’anything’

使用这种方式让less不用编译,直接原样输出引号里面的内容。

 

函数:less提供一些功能函数

使用的时候可以去查询http://lesscss.org/functions/,比如把img转成base64的直接写在页面,可以使用:data-uri(‘../data/image.jpg’);

默认是转成bas64,也可以指定类型:data-uri(‘image/jpeg;base64’, ‘../data/image.jpg’);

这些已经能够应付日常的开发了吧,Over

 

本文参考:http://lesscss.org/features/#features-overview-feature

less
作者:张雪飞
出处:https://zhangxuefei.site/p/1730
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注