Less 循环

最新推荐文章于 2024-09-12 13:37:14 发布

Luck Young

最新推荐文章于 2024-09-12 13:37:14 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发算法前端

本文链接：https://blog.youkuaiyun.com/Mote123/article/details/81133259

前端同时被 3 个专栏收录

49 篇文章

订阅专栏

web开发

35 篇文章

订阅专栏

算法

10 篇文章

订阅专栏

本文介绍如何使用Less的循环功能实现响应式的分页符设计，具体为当屏幕宽度大于896px时显示10个数字按钮，小于该尺寸时仅显示5个数字分页按钮。

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

Less循环可以设置参数的值，也可以生成类，在CSS3动画中真是6得不要不要的。

下面我就实现一个分页符的响应式，在>896px的屏幕下显示10个数字按钮，小于只显示5个数字分页按钮。

1、首先我们先设置循环函数

    /*隐藏大于5 的分页符*/
   .hidden-numBtn(@n , @i : 5) when (@i <= @n){
      li:nth-child(@{i}){
        display: none;
      }
      .hidden-numBtn(@n , (@i + 1));
    }

2、参数说明

.hidden-numBtn：函数名

n：边界终值

i：初始增长值

然后在内部递归一下

3、调用函数

@media screen and(max-width: 896px){
      .hidden-numBtn(10);
}

我们在需要的地方调用函数即可，函数是作用域是全局的，在任意位置都可以调用。

我们来看一下编译后的css

@media screen and (max-width: 896px) {
  .paging .pagination li:nth-child(5) {
    display: none;
  }
  .paging .pagination li:nth-child(6) {
    display: none;
  }
  .paging .pagination li:nth-child(7) {
    display: none;
  }
  .paging .pagination li:nth-child(8) {
    display: none;
  }
  .paging .pagination li:nth-child(9) {
    display: none;
  }
  .paging .pagination li:nth-child(10) {
    display: none;
  }
}

才开始用Less，感觉真的很舒服呀，还在用纯css写的小伙伴，本人在这里力推Less，当然还有Sass，看自己习惯那个了。