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 { |
随机推荐
- Python--day69--ORM的F查询和Q查询
F查询和Q查询 F查询 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的比较.F() 的实例可 ...
- Python--day68--Django ORM的字段参数、元信息
字段参数 null 用于表示某个字段可以为空. unique 如果设置为unique=True 则该字段在此表中必须是唯一的 . db_index 如果db_index=True 则代表着为此字段设置 ...
- Python--day68--ORM内容回顾
Django项目如何使用ORM连接MySQL: 多对多关系讲解:
- 自动为DEV GridView控件添加SizeChanged事件
实现gdv设置的抽象对象,不用每个gdv控件都添加sizechanged事件,只需执行gdc绑定sql函数,在其中会自动添加SizeChanged事件. //2016.5.13 by sngk //根 ...
- uni-app学习记录04-轮播图和滑屏图片
<template> <view> <!-- 轮播图视图 swiper-item是每页的元素 --> <swiper :indicator-dots=&quo ...
- Java内存分析工具--IDEA的JProfiler和JMeter插件
一.JProfiler简介 JProfiler 是一个商业授权的Java剖析工具,由EJ技术有限公司,针对的Java EE和Java SE应用程序开发的.它把CPU.执行绪和内存的剖析组合在一个强大的 ...
- java Set接口(元素不可以重复)
Set是Collection子接口: Set和Collection基本上一样,一点除外: Set无法记住添加的顺序,不允许包含重复的元素. 当试图添加两个相同元素进Set集合,添加操作失败,add() ...
- linux模块加载竞争
到目前, 我们的讨论已来到一个模块加载的重要方面: 竞争情况. 如果你在如何编写你的 初始化函数上不小心, 你可能造成威胁到整个系统的稳定的情形. 我们将在本书稍后讨论 竞争情况; 现在, 快速提几点 ...
- visual studio 2010问题修复
我在重新安装 Visual Studio 2010 和 SQL sever 2012 的时候,安装好的两个软件打开时都遇到了这个问题:“在此计算机中仅有部分 Microsoft Visual Stud ...
- 2019-11-17-dotnet-core-使用-GBK-编码
title author date CreateTime categories dotnet core 使用 GBK 编码 lindexi 2019-11-17 16:36:27 +0800 2019 ...