美文网首页
记一次less循环

记一次less循环

作者: 前端切克闹 | 来源:发表于2019-10-29 00:02 被阅读0次

    准备构建项目的CSS框架,使用LESS来作为预编译器。

    在写栅格布局时,参考ant-design的24栏布局,需要设置.col-{n}

    通常需要从1写到24重复设置width属性,重复性很强,后续如果修改为12栏布局,维护很不方便

    .col-1{width:4%}
    .col-2{width:8%}
    ...
    .col-24{width:100%}
    

    如果用less的循环布局就大大减少了代码量,而且便于后续修改维护,less提供了类似函数的模块封装并提供了内置函数when做条件判断

    .col-loop(@counter) when (@counter>0){
                &.col-@{counter}{
                    width:@counter/24*100%;
                }
                .col-loop((@counter)-1);
            }
    .col-loop(24);
    

    相关文章

      网友评论

          本文标题:记一次less循环

          本文链接:https://www.haomeiwen.com/subject/bgwlyctx.html