较少-在字符串中使用nth-child变量 [英] LESS - use nth-child variable in string

问题描述

当然可以用LESS重写以下内容吗?

Surely there's a way to rewrite the following in LESS?

#bg-slider{

li:nth-child(1){
    background:url('../images/bg1.jpg');
}

li:nth-child(2){
    background:url('../images/bg2.jpg');
}

li:nth-child(3){
    background:url('../images/bg3.jpg');
}

}

我尝试过:

.bg-image (@slide) {
  background:url('../images/bg@{slide}.jpg');
}

#bg-slider{
li:nth-child(n){
    .bg-image(n);
}
}

但是对于所有li来说，这只会给出'../images/bgn.jpg'.

But that just gives '../images/bgn.jpg' for all li's.

推荐答案

#bg-slider {
    li {
        .bkg(1);
        .bkg(2);
        .bkg(3);
    }

    .bkg(@i) {
        &:nth-child(@{i}) {
            background: url('../images/bg@{i}.jpg');
        }
    }
}

这篇关于较少-在字符串中使用nth-child变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！