我正在尝试使用 less 为一组窗口创建 50 个背景图像。
这些图像路径的格式完全相同,但每个窗口的数字只增加 1。
目前我有以下代码:
window-1{
background-image: url('/content/images/background-1-window.png')
}
window-2{
background-image: url('/content/images/background-2-window.png')
}
..
window-50{
background-image: url('/content/images/background-50-window.png')
}
我想要实现的是使用 less 有效地让变量替换数字,是否可以使用变量和/或混合来做到这一点?
类似于:
window-@window-number{
Background-image: url('/content/images/background-@window-number-window.png')
}
有没有可能做这样的事情?
最佳答案
是的,有可能,请参阅此答案 https://stackoverflow.com/a/15982103/1596547和 https://github.com/twbs/bootstrap/issues/10990对于一些示例代码:
在你的情况下:
.setbackgroundimage(@index) when (@index > 0)
{
window-@{index}
{
background-image: url('/content/images/background-@{index}-window.png');
}
.setbackgroundimage(@index - 1);
}
.setbackgroundimage(50);
关于html - 使用 less css 的增量文件名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19995863/