博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
不要盲目的在项目中使用LESS CSS
阅读量:7220 次
发布时间:2019-06-29

本文共 2454 字,大约阅读时间需要 8 分钟。

 此篇文章发布于2011年,当时的想法与现在已有不同,不建议继续阅读。

  如果你还不知道是什么东西,可以看一下这篇文章,是我一朋友写给新人看的《》

  不可否认,LESS CSS是个强大的工具,它弥补了css没有变量、无法运算等一些“先天缺陷”,但它似乎给我一种错觉,就是为了功能而实现功能

  比如它的引用功能

.rounded_corners{	-moz-border-radius: 8px;	-webkit-border-radius: 8px;	border-radius: 8px;}#header{	.rounded_corners;}#footer{	.rounded_corners;}

  最终编译后会生成如下代码

.rounded_corners{	-moz-border-radius: 8px;	-webkit-border-radius: 8px;	border-radius: 8px;}#header{	-moz-border-radius: 8px;	-webkit-border-radius: 8px;	border-radius: 8px;}#footer{	-moz-border-radius: 8px;	-webkit-border-radius: 8px;	border-radius: 8px;}

  它似乎弥补上了css的一个缺陷,但我并没发现他这样做的目的是什么,我完全可以直接这样一段

.rounded_corners{	-moz-border-radius: 8px;	-webkit-border-radius: 8px;	border-radius: 8px;}

  然后页面哪需要圆角,直接加上class="rounded_corners",当然,它的引用是可以设置参数的,比如这样

.margin10(@size:10px){	margin:@size;}.test{	.margin10;}

  似乎很高级的样子,参数可以控制,减少了重复代码的书写,但是否实用呢?我拿之前项目里的样式比较了下,发现能拎出来,通过参数设置具体样式的几乎没有,只有几个css3的属性用这个功能还是比较OK,比如这段阴影样式

.box-shadow(@arguments){	-webkit-box-shadow:@arguments;	-moz-box-shadow:@arguments;	box-shadow:@arguments;}

  因为只要是阴影,就少不了这三句,类似的还有圆角、透明等,就不一一列举了。

  然后,说说最基本的变量吧,我就一直没想通css要变量有什么用

@w100:100px;@h100:100px;div{	width:@w100;	height:@h100;}

  可能会说,我定义好一个变量,在不同的地方都可以直接调用,如果要修改,只需修改一次。但问题是,万一我只想改其中一个的样式,另一个别动,或者就是两个同时都需要修改。

  就比如我一个页面里有2块广告区域,原先宽高是一样的,现在我要其中一个区域变大,另一个变小,这样我反而觉得定义变量增多了我的工作量。

  可能又会说,LESS CSS不是支持四则运算嘛,对,我们可以这样子

@w100:100px;@h100:100px;div{	width:@w100 + 50px;	height:@h100 - 50px;}

  甚至还可以更2B青年一点

@w100:100px;@h100:100px;div{	width:(@w100 + 50px) / 2 + 75px;	height:@h100 - (100px / 2);}

  LESS CSS里的计算功能就像变量一样让我无法理解,别忘了,LESS CSS是要编译过你写的.less文件的,最终生成的还是标准的css代码。换句话说,就是你再怎么定义变量,再怎么计算,最终它生成的还是一个固定的数值,帮我们减少的只是计算这个数值的时间,但我觉得我花时间去写个运算,还不如心算一下。

  当然了,LESS CSS也并非一无是处,它的嵌套功能就让我眼前一亮

  通常我们要给上面这三个div写样式,无非用2种方法,一种就是定义class/id,一种就是给最外层定义个class/id,然后用继承去写。而LESS CSS给了我们一种友好阅读的方式

.test{	.margin10;	@color:#4d926f;	width:@w100 + 100px;height:100px;border:1px solid red;background:@color;	&:hover,&.selected{background-color:#FFF}	/*嵌套*/	.test1{width:@w100 - 50px;height:100px;background-color:red;font-size:20px;		/*多重嵌套*/		div{width:100%;height:50px;background-color:#9F0;}	}	.test1:hover{background-color:@color}}

  相信这样的样式要查找起来,都会比较轻松,哪一层套哪一层都一清二楚,这是我感觉它很赞的功能。

  总的来说,LESS CSS不是很适合用在项目中,它更适用于皮肤、模板等整体框架固定死的网站制作,比如论坛、空间。所以大家在使用LESS CSS请先考虑下这个工具是否适用,别盲目的使用,不但效率没提高,还增加了不必要的工作量。

    本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2011/12/02/2272212.html,如需转载请自行联系原作者

你可能感兴趣的文章
查询数据库信息
查看>>
mysql主从复制
查看>>
初探Java Builder模式--组装复杂的实力
查看>>
Netty笔记二(发送对象--服务端客户端附可运行源码)
查看>>
ros 设置hotspot认证网段
查看>>
MySQL 超级入门教程
查看>>
Aerospike 数据关系模型
查看>>
VirtualBox 扩充硬盘大小
查看>>
BC95 NCONFIG 配置UE
查看>>
RPM 安装与卸载命令
查看>>
filebeat与logstash配置文件详解
查看>>
process与session
查看>>
Echarts图表饼状图添加百分比(提示框组件)
查看>>
Mui 区域滚动scroll底部显示不完全的问题
查看>>
Android -- 布局管理器
查看>>
文件目录树函数(递归)
查看>>
Linux PS1
查看>>
Android Studio 工具栏切换卡顿
查看>>
Centos 目录结构
查看>>
4.2Python文件基本操作2:tell、seek
查看>>