less实现if else
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代码 测试 |
//编译之后的css代码 |
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{ |
.con1 { |
随机推荐
- gradle在build的时候找不到某个jar包的解决办法
前几天公司来新人, 我给他装项目环境的时候遇到一个问题, 在执行gradle build时遇到一系列的错误, 我一个个分析并解决了, 特此记录, 以供他人参考. 一, 首先遇到了找不到spring-b ...
- [转]移动APP安全测试
1 移动App安全风险分析 1.1 安全威胁分析 安全威胁从三个不同环节进行划分,主要分为客户端威胁.数据传输端威胁和服务端的威胁. 1.2 面临的主要风险 1.3 Android测试思维 ...
- Python--day69--ORM外键的正向查询和反向查询
什么是正向查询,什么是方向查询?
- X Samara Regional Intercollegiate Programming Contest
A. Streets of Working Lanterns - 2 对于每个括号序列,存在一个\(mv\),表示要接上这个序列至少需要\(-mv\)个左括号,同时处理出接上这个序列后,左括号数量的增 ...
- iptables一个包过滤防火墙实例
环境:redhat9 加载了string time等模块 eth0 接外网──ppp0 eth1 接内网──192.168.0.0/24 #!/bin/sh # modprobe ipt_MASQUE ...
- Flex AIR使用ADT命令打包 ipa
1. 配置环境变量. 2. 测试adt命令 3. 将ShepherdPhone0815.mobileprovision和 my.p12文件都放入编译好的工程目录下,如下图: 4.切换到上述编译好的目录 ...
- 2019-9-2-本文说如何显示SVG
title author date CreateTime categories 本文说如何显示SVG lindexi 2019-09-02 12:57:38 +0800 2018-2-13 17:23 ...
- H3C NAPT
- 解决input number类型上下滚动 禁用滚轮事件
1.去掉input在type="number"时的上下箭头 <style> input::-webkit-outer-spin-button,input::-webki ...
- P1056 骑士游历
题目描述 给出一个8*8的空棋盘,其中行由a-h编号,列由1-8编号. 再给出起点和终点,问,骑士至少需要几步可以从起点移到终点.骑士是走日的.类似于中国象棋的马. 输入格式 输入两个字符串,每个字符 ...