5

我需要在当前的网络（应用程序）项目中使用非常多的图像（>600）。由于我几乎没有 PHP/SQL 经验，因此我想管理它们的方式是在 css/less.css 中。

我制作了一个名为“faces.less”的样式表来管理这些。我目前的工作表是这样的：

.f01 {
background-image: url("{base-url}/f01.png");
}

宽度、高度等在另一个类中管理。但是到这 600 多次感觉很愚蠢，LESS 或 jQuery 中没有任何（简单）方法可以从类名中加载图像名吗？我理想的解决方案看起来有点像这样：

.f01, .f02, .f03 {
background-image: url("@{base-url}/{class-name}+png");

欢迎任何解决方案！

4

2 回答 2

3

要从类名构造图像名称，请使用图像标签（我不确定使用背景图像的最佳方法）：

var basePath = 'mysite/images/';
$('a').each(function() {
    var className = $(this).attr('class');
    className = className.replace(/[^f][^0-9]*/, '').replace(' ', '');
    $(this).css('background-image', basePath + className + '.png');
});
于 2013-04-21T21:33:06.693 回答
2

使用 LESS 1.3.1+

0在数字上获得领先比在递归循环中正确工作有点挑战10，但这样可以做到：

较少的

@base-url: "/blah/blah";
@max-faces: 600; //enter the maximum number of faces to generate code for

.buildFaces(@index, @pre: ~"f0") when (@index =< @max-faces) {
  //build classes
  .@{pre}@{index} {
  background-image: url("@{base-url}/@{pre}@{index}.png");
  }
  //loop 
  .buildFaces((@index + 1), ~`(@{index} + 1) < 10 ? "f0" : "f"`);
}
// end loop
.buildFaces(@index, @pre) when (@index > @max-faces) {}

// start loop
.buildFaces(1);

CSS 输出（简短）

.f01 {
  background-image: url("/blah/blah/f01.png");
}
.f02 {
  background-image: url("/blah/blah/f02.png");
}

...

.f599 {
  background-image: url("/blah/blah/f599.png");
}
.f600 {
  background-image: url("/blah/blah/f600.png");
}
于 2013-04-22T22:38:37.300 回答