注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】快速开发CSS的利器 - less 参数混入与运算  

2015-04-23 23:11:16|  分类: CSS框架 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

快速开发CSS的利器 - less 参数混入与运算

在之前我们已经讲解了less的变量以及作用域,也提到了混入~今天我们提两个类似的功能,一个是参数的混入,另一个是运算。

less 参数混入

参数混入实际上是混入的一种,混入指的是在CSS代码当中再书写CSS代码(也就是样式中的样式),对于一些会在样式表中重复使用的样式规则,使用样式的嵌套方式进行书写。而参数混入,则是将一个公用的样式属性值作为一个类的参数,通过控制这个类的参数值,达到控制公用样式中属性值的方法,最为常用的地方在于浏览器兼容问题严重的CSS3样式的书写。

来看一个案例:

  1. .border-radius( @radius: 10px ) {
  2.     -webkit-border-radius: @radius;
  3.     -moz-border-radius: @radius;
  4.     border-radius: @radius;
  5. }

在这个例子中,.border-radius有个默认的10px的圆角。通过修改括号中@radius的值能够使下面各个属性的属性值同时发生改变。

less 运算

对于less中CSS样式的书写,与原来书写方式有所不同的是,可以使用表达式(也就是可以使用变量与数字的运算进行),例如

  1. @width: 10px;
  2. @half_width: @width / 2;

上面的代码在less的CSS中可以这样来使用:border: (@half_width / 2) solid #000

结束~!

 

欢迎大家互相学习交流。独行冰海

  评论这张
 
阅读(14)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017