当前位置:首页 > 开发 > Web前端 > Css > 正文

不要盲目的在项目中使用LESS CSS

发表于: 2013-02-09   作者:dcj3sjt126com   来源:转载   浏览:
摘要:  如果你还不知道LESS CSS是什么东西,可以看一下这篇文章,是我一朋友写给新人看的《CSS——LESS》   不可否认,LESS CSS是个强大的工具,它弥补了css没有变量、无法运算等一些“先天缺陷”,但它似乎给我一种错觉,就是为了功能而实现功能。   比如它的引用功能 ? .rounded_corners{     

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

  不可否认,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",当然,它的引用是可以设置参数的,比如这样

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

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

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

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

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

?
@w 100: 100px ;
@h 100: 100px ;
div{
     width :@w 100 ;
     height :@h 100 ;
}

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

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

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

?
@w 100: 100px ;
@h 100: 100px ;
div{
     width :@w 100  + 50px ;
     height :@h 100  - 50px ;
}

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

?
@w 100: 100px ;
@h 100: 100px ;
div{
     width :(@w 100  + 50px ) / 2  + 75px ;
     height :@h 100  - ( 100px  / 2 );
}

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

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

?
<div class= "test" >
     <div class= "test1" >
         <div></div>
     </div>
</div>

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

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

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

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

 

出处:http://www.cnblogs.com/hooray

不要盲目的在项目中使用LESS CSS

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
CSS 彻底改变了 Web 页面的设计,但 CSS 仍然是静态的,而且在其句法发展方面受到限制。这些限制是
中文网站:http://www.lesscss.net/ 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如
一、背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来。一个web系统用户可以选择一个自
一、背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来。一个web系统用户可以选择一个自
LESS(官网在此:http://lesscss.net/)的魅力相信大家都已明了,个人认为它最大的魅力在于能够清晰
其实现在吧,貌似很多人追星,吹捧,自己的事情没处理完,就只想着一天都晚为别人打抱不平,你说这
阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以
LESS —— 一个CSS预编译框架,它在CSS的语法基础之上,引入了变量、Mixin(混入)、运算以及函数等
参考:使用less http://less.bootcss.com/#using-less 1. 安装node.js (下载地址:https://nodejs.o
Less is More是很多设计师的口头禅,它最早是由建筑大师Ludwig Mies van der Rohe提出,是一种提倡
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号