less使用变量减少伪类:nth-child代码

原有的代码

&:nth-child(1){
    margin-top: 0;
    h4 {
        top: auto;
        bottom: 596 / @s;
    }
    .fixed h4{
        top: 100 / @s;
    }
}

&:nth-child(2){
    h4 {
        top: auto;
        bottom: 465 / @s;
    }
    .fixed h4{
        top: 230 / @s;
    }
}
&:nth-child(3){
    h4 {
        top: auto;
        bottom: 336 / @s;
    }
    .fixed h4{
        top: 360 / @s;
    }
}
&:nth-child(4){
    h4 {
        top: auto;
        bottom: 206 / @s;
    }
    .fixed h4{
        top: 490 / @s;
    }
}

使用less

 .position(@i) when (@i <= 4) {
    &:nth-child(@{i}) {
        margin-top: 0;
        h4 {
            top: auto;
            bottom: (596 - 130*(@i - 1)) / @s;
        }
        .fixed h4{
            top: (100 + 130*(@i - 1)) / @s;
        }
    }
    .position(@i + 1)
}

.position(1)

标签：less,auto,top,伪类,bottom,h4,nth,child
来源： https://blog.csdn.net/qq799028706/article/details/112003616