Question

我需要在当前的网络（app）项目中使用非常多的图像（＆gt; 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");

欢迎任何解决方案！

Answer 1

使用图片标签从类名构建图像名称（我不确定背景图像的最佳方式）：

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');
});

Answer 2

使用LESS 1.3.1 +

使用递归循环使得小于0的数字的前导10变得有点挑战，但这可以管理它：

<强> LESS

@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");
}

从类名获取CSS url路径

2 个答案:

使用LESS 1.3.1 +