首页 > 其他分享 >不要盲目的在项目中使用LESS CSS

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

时间:2022-12-27 18:32:52浏览次数:51  
标签:LESS 8px radius 盲目 border 100 CSS


 如果你还不知道​​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请先考虑下这个工具是否适用,别盲目的使用,不但效率没提高,还增加了不必要的工作量。

 


标签:LESS,8px,radius,盲目,border,100,CSS
From: https://blog.51cto.com/u_3457306/5973173

相关文章

  • Css多行字符截取方法详解
    Css多行字符截取方法详解时间:2021-07-0110:21:17相信有很多同学在写前端页面的时候,都会遇到字符长了需要截取的问题,最简单的方法就是手动去截取,可这样又感觉太low了,今......
  • css 实现箭头步骤条
    <!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=......
  • css中content可以用到的字符编码
    css中content可以用到的字符编码 项目中用到的一些特殊字符和图标html代码<divclass="cross"></div>css代码.cross{width:20px;height:20px;border-radius:10p......
  • HTML5和CSS3的一些新特性-视屏,语音,表单,选择器,伪类,结构,before和after选择器,iconmoon 字
    HTML5和CSS3的一些新特性-视屏,语音,表单,选择器,伪类,结构,before和after选择器,iconmoon字体使用方法Html5:1.HTML5新增语义化标签<!DOCTYPEhtml><htmllang="en"><head>......
  • HTML,CSS 基础知识整理
    Day01html基础1.网站三要素html===结构===w3c指定语法规则css===表现===w3c指定语法规则js===行为===ECMA指定语法规则2.各种的标签1)文章标题标签h1-h6特点:双标签......
  • Web前端——CSS布局
    文章目录​​一.文档流(normalflow)​​​​1.定义​​​​2.对于我们来说元素主要有两个状态​​​​3.元素在文档流中有什么特点:​​​​二.盒子模型(boxmodel)​​​......
  • Web前端——CSS结构
    文章目录​​一.CSS概述​​​​1.来源​​​​2.发展​​​​3.使用CSS的好处​​​​二.CSS定义​​​​1.CSS层叠样式表(CascadingStyleSheet)​​​​2.定义CSS......
  • 如何优雅的写 css 代码
    CSS(全称CascadingStyleSheets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一,基于互联网上全面的资料和简单易懂的语法,CSS非常易于学习,但其知识点广泛......
  • 有奖评测 | Serverless 应用引擎 SAE 征集令开启
    写评测拿好礼,Serverless评测局邀您参与SAE征文活动!2022年11月25日-2023年1月25日期间,通过体验Serverless应用引擎SAE产品,发布评测文章并通过审核,百分百可得阿里云......
  • Poisson Blending(Seamless clone)研究和实现
    PoissonBlending实现了非常棒的效果,可以看《自己动手,实现“你的名字”滤镜》 ​​javascript:void(0)​​它的原理在论文《PoissonImageEditing》中进行了......