记一次less循环

2019-10-29  本文已影响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);
上一篇下一篇

猜你喜欢

热点阅读