码迷,mamicode.com
首页 > 其他好文 > 详细

less实现if else

时间:2018-04-04 16:16:55      阅读:544      评论:0      收藏:0      [点我收藏+]

标签:变量   100%   根据   less   ges   width   1.5   条件判断   宽度   

less没有我们平常使用的if,else条件判断,而是用when来实现这种用法

1.比如我们要设置宽度

宽度可以百分比,也可以是像素,当是百分比时做对应处理,当是px时做另一种处理,这时候就需要用when来实现if-else来实现条件判断

  • less语法实现if-else条件判断
@bs:20rem;//定义变量
//ispercentage是less中提供的方法,判断是不是百分比,返回bool值
.w(@width) when not(ispercentage(@width)){
//当不是百分比时(less中用的是not来表示非)
  width:@width/@bs;
} 
.w(@width) when (ispercentage(@width)){
//当是百分比时
  width:@width;
}
//less代码 测试
.container {
  width: 2.5rem;
}
.container-less {
  width: 50%;
}

 

//编译之后的css代码
.container {
  width: 2.5rem;
}
.container-less {
  width: 50%;
}

 

 

2.less有类似于c#语言的特点,方法的重载也就是可以定义多个重名方法,根据传递参数不同来识别对应方法调用


@bs:20rem; .w(@width) when not(ispercentage(@width)){ width:@width/@bs; } .w(@width) when (ispercentage(@width)){ width:@width; } .h(@height) when not(ispercentage(@height)){ height: @height/@bs; } .h(@height) when (ispercentage(@height)){ height:@height; } //定义多个同名方法position //只设置宽高的pos .pos(@width;@height)
{ .w(@width); .h(@height); position:absolute; } //设置宽高和url的pos .pos(@width;@height;@url){ .w(@width); .h(@height); position:absolute; background: url("../images/@{url}") no-repeat center/ 100% 100%; } //设置宽高,url和背景图片大小的pos .pos(@width;@height;@url;@pos1;@pos2){ .w(@width); .h(@height); position:absolute; background: url("../images/@{url}") no-repeat center/ @pos1/@bs @pos2/@bs; }
结果
 
.con1{
  .pos(30;50)
}
.con2{
  .pos(30;50;‘page1/card1.png‘);
}
.con3{
  .pos(400;50%;‘page1/card1.png‘;400;500)
}

 

 
.con1 {
  width: 1.5rem;
  height: 2.5rem;
  position: absolute;
}
.con2 {
  width: 1.5rem;
  height: 2.5rem;
  position: absolute;
  background: url("../images/page1/card1.png") no-repeat center / 100% 100%;
}
.con3 {
  width: 20rem;
  height: 50%;
  position: absolute;
  background: url("../images/page1/card1.png") no-repeat center / 20rem 25rem;
}

 

less实现if else

标签:变量   100%   根据   less   ges   width   1.5   条件判断   宽度   

原文地址:https://www.cnblogs.com/fanfanZhao/p/8717375.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!