从类名中获取 CSS url 路径答案

【问题标题】：Get CSS url path from class name从类名中获取 CSS url 路径
【发布时间】：2013-04-21 21:23:11
【问题描述】：

我需要在当前的 web(app) 项目中使用很多图像 (>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");

欢迎任何解决方案！

【问题讨论】：

如果每张图片都有一个单独的名称，它们应该是 id，而不是类 - 例如 #f01。我认为 JSON 或 XML 会是比 CSS 更好的系统，如果你想避免使用数据库
这对于 CSS 来说似乎是一大堆工作。为什么不使用服务器端语言？
你是在加载图片名，还是根据类名构造图片名？
图片名等于类名，html是这样的没有 ID，我想将 ID 用于模态函数。无法使用数据库，因为它是学校可交付成果且缺乏 SQL 知识
600 多张图片？我几乎无法相信许多图像是非内容图像。听起来它们应该是真实的图像，而不是背景。

标签： jquery css variables less var

【解决方案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');
});

【讨论】：

我不希望它们作为 src 的，我需要多次使用它们 + CSS 背景图像加载速度比 HTML 更快
将其编辑为我认为应该与锚标签一起使用的内容 - 试一试，让我知道它是否有效 - 面孔是所有这些标签中唯一的类，对吗？
切换到正则表达式和空格删除器 - 正则表达式可能需要一些调整，但这是大体思路
谢谢！但是这里出现了一个棘手的问题：我把它放在一个 .js 文件中，上面有一个 $(document).ready(function() 行，但我没有看到任何事情发生（也改变了路径）。类名还在吗对吗？因为它不再显示 .faces （仅在所有这些上显示类）......
一切都在正则表达式中，如果你想在没有正则表达式的情况下测试它，试试这个：className = className.replace('faces', '').replace(' ', '');

【解决方案2】：

使用 LESS 1.3.1+

在小于10 的数字上让领先的0 与递归循环正常工作有点挑战，但这成功了：

少

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

【讨论】：