5

現在の Web(アプリ) プロジェクトで非常に多くの画像 (>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

イメージタグを使用して、クラス名からイメージ名を作成するには (background-image を使用する最善の方法はわかりません):

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 に答える