11_less中的条件判断

最新推荐文章于 2023-02-07 11:38:52 发布

无名之辈无名之辈

最新推荐文章于 2023-02-07 11:38:52 发布

阅读量3.1k

点赞数

分类专栏：前端 less

本文链接：https://blog.csdn.net/ice_stone_kai/article/details/110729295

版权

前端同时被 2 个专栏收录

81 篇文章 1 订阅

订阅专栏

less

11 篇文章 0 订阅

订阅专栏

less中可以通过when混合添加执行限定条件,只有条件满足(为真)才会执行混合中的代码

when表达式中可以使用比较运算符(> < >= <= =),逻辑运算符,或检查函数来进行条件判断

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="css/14.css">
</head>
<body>
<div></div>
</body>
</html>

less:

/*
less中可以通过when混合添加执行限定条件,只有条件满足(为真)才会执行混合中的代码
when表达式中可以使用比较运算符(> < >= <= =),逻辑运算符,或检查函数来进行条件判断
*/

/*.size(@width,@height) when (@width=100px) {
  width: @width;
  height: @height;
}*/

//() , () 就相当于js中的逻辑 或
//()and() 就相当于js中的逻辑 与

// 只有宽度为100或者高度为100,才会执行编译
/*.size(@width,@height) when (@width=100px), (@height=100px) {
  width: @width;
  height: @height;
}*/

//使用js内置函数进行判断:
// 只有传入单位是px,参会执行混合代码
.size(@width,@height) when (ispixel(@width)) {
  width: @width;
  height: @height;
}

div {
  .size(100px, 400px);
  background: red;
}

无名之辈无名之辈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
11_less中的条件判断

less中可以通过when混合添加执行限定条件,只有条件满足(为真)才会执行混合中的代码when表达式中可以使用比较运算符(> < >= <= =),逻辑运算符,或检查函数来进行条件判断<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> .
复制链接

扫一扫