4

cssの前処理にsass（http://sass-lang.com/ ）の代わりにless（ http://lesscss.org/ ）を使用したいと思います。静的リソース用のCookieなしドメインのセットがあります。例：0.mydomain.com、1.mydomain.com、2.mydomain.comなど。コンパイルされたCSS出力にCookieなしのドメインが挿入されるように、lessを使用してCSSをコンパイルしたいと思います。@functionを使用してsassドキュメントでカスタム関数を作成するこの機能を見つけました。同等のものはより少なく存在しますか（私は見つけることができません）？ファイル名をCookieなしのドメイン（X.mydomain.com）に対応する数値Xに変換するハッシュアルゴリズムを実行する関数が必要です。より少ない使用でこれをどのように行うでしょうか？

以下の例は、説明のために考案されたものです。

my.lessファイル：

@function domainX(path) {
    //configs
    var protocol = "http://";
    var domain = ".mydomain.com"
    var N = 4; //4 cookieless domains

    var sum = 0;
    var s = path.substr(path.lastIndexOf("/") + 1);
    for (var i = 0; i < s.length; i++) {
        sum += s[i].charCodeAt();
    }
    @return protocol + (sum % N) + domain + path;
}

.myItem {background-image:url(domainX('/images/background.jpg')) }

コンパイルされた出力を生成します

.myItem {background-image:url('http://1.mydomain.com/images/background.jpg') }

SASSの例は http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#functionsです。

「機能ディレクティブ」のセクションを参照してください

LESSドキュメントの最も近い例を以下に示しますが、base-urlを作成する関数はありません。

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

たぶん、ソリューションのLESS + Node.js部分もありますか？

ありがとう！

4

2 に答える 2

6

jsを埋め込むLeSSの機能を使用してこれを行うことができるはずです：

.background(@path) {
    background-image: ~`(function(){ var protocol = "http://"; var domain = ".mydomain.com"; var N = 4; var sum = 0; var s = @{path}.substr(@{path}.lastIndexOf("/") + 1); for (var i = 0; i < s.length; i++) { sum += s[i].charCodeAt(); } return "url(" + protocol + (sum % N) + domain + @{path} + ")";})()`;
}

.myItem {
    .background("/images/background.jpg");
}

パフォーマンスがどのようになるかはわかりませんが、サーバー側で処理している場合は気にせず、クライアント側ではキャッシュされるため、問題はありません。

于 2012-10-18T16:32:45.543 に答える
2

いいえ。LESSの機能はSassよりもかなり少なくなっています（関数もループもありません）。そのようなリモートで何かを行うには、ミックスインを使用する必要があります。Sassは、文字列操作関数が組み込まれていないという事実を除いて、それを行うことができます。そのため、それらを追加するには、Rubyコードを少し作成する必要があります。

于 2012-09-30T03:09:42.670 に答える