less （七） when 的使用

cvper

于 2018-04-22 18:35:02 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： less 文章标签： less when 使用

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80030592

less 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Less的when条件语句为不同宽度的元素应用不同的样式。通过示例展示了当输入宽度大于等于150px或小于150px时，如何设置div的不同样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面看看 less when 的使用；

我们写一个样式：当输入的宽度大于等于150px 的时候，给div添加一种样式；

当输入的宽度小于150px的时候，给div添加另外一种样式；

使用when就可以实现上面的功能：

.bgWidth(@width) when(@width<150){
     width:100px; 
     height:50px;
     border:1px solid red;
}

.bgWidth(@width) when(@width>=150){
    width:200px; 
    height:100px;
    border:1px solid red;
}

div{
    .bgWidth(300px)
}

我们写了两个一样的函数，后面紧跟一个 when() ,里面的判断条件不一样，

当满足条件时，就执行里面的样式；