HTML5学堂-码匠 HTML5学堂

您当前位于:工具类文件推荐 ——> 快速开发CSS的利器 - less系列 参数混入与运算

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

2015/05/07 23:59:49 | 作者:HTML5学堂(码匠) | 分类:工具类文件推荐 | 关键词:快速开发,less,参数,混入

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

HTML5学堂:我们在CSS中经常会利用同一个数值进行赋值或计算,在之前我们已经讲解了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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS