8

less.js のライブラリを使用して、ブラウザー内のより少ないファイルから動的に css を再生成することができます。より少ないコードを変更する簡単な方法があれば、これはサイトの css を動的に更新する非常に強力な方法になります。

大きなサイト全体で 100 回使用された色があるとします。JavaScript だけを使用してその色を動的に変更したい場合は、その色を持つ css のすべてのビット (おそらく 50 行のコード) を更新する必要があります。

私が想像していることで、あなたが書く必要があるのは次のようなものだけです：

$('@mainColour').value('#F04');

自分もやってみようかなと思っているんですが、かなり大きなプロジェクトのようで、すでに誰かがこのようなことを始めているのではないでしょうか?

編集: 明確にするために、理想的には、Less コードの文字列を取得し、プログラムで編集して (おそらく jquery のようなセレクター構文を使用して)、変更された Less として吐き出します。理想的には、コードは Javascript である必要があります (ただし、必ずしもクライアント側である必要はありません)。上記の例は 1 つの可能なアプリケーションですが、良いアプリケーションではない可能性があります (それを達成するためのより一般的な方法がある場合)。

4

6 に答える 6

14

それは間違いなく可能ですが、少ないソースコードを少し変更する必要がありました（実際に行うことを意図していないことを考えると、これは問題ないと思います:)）

誰もが最初にデモを見たいと思っていると思います。ここをクリックしてください: http://jsfiddle.net/kritzikratzi/BRJXU/1/ (script-window には変更された less.js-source のみが含まれ、関心のあるものはすべて html ウィンドウにあります)

kk、最初に私のパッチについて説明します。使い方は最後にあります。

パッチは 3 つの部分で構成されています

ユーティリティ関数を追加する

less.Overrides = {}; 
less.Override = function( variableName, value ){
    if( !value ){
        delete less.Overrides[variableName]; 
    }
    else{
        less.Overrides[variableName] = value; 
    }
    less.refreshStyles(); 
};

プロパティをオブジェクトに保存し、そのスタイルを更新することをあまり伝えません。

解析関数を変更する

   function parse(str, callback ){
        ... 

        var overrides = "\n\n"; 
        for( var key in less.Overrides ){
            overrides += key + ": " + less.Overrides[key] + ";\n"; 
        }

        str += overrides;

ここで行うことは、オーバーライドされたプロパティをシリアル化し、解析されるすべてのファイルの末尾に追加することだけです。

loadStyles 関数を変更する

    if (styles[i].type.match(typePattern) || styles[i].hasAttribute( "lessText" )) {
        var lessText; 
        if( styles[i].hasAttribute( "lessText" ) ){
            lessText = styles[i].getAttribute( "lessText" );
        }
        else{
            lessText = styles[i].innerHTML || ''; 
            styles[i].setAttribute( "lessText", lessText );
        }
    ....

デフォルトでは、less は type パラメータを<style type='text/less'>toに置き換えtype='text/css'、less-source を忘れました。これを防ぐために、元の less-source が保存およびロードされます。

使い方と結論

<style type="text/less">
    @color: green; 

    #header{ color: @color; }
</style>
<div id="header">i'm the header!</div>
<a href="#" onclick="less.Override('@color', 'red');">make it red</a>

これは私のコンピューターで問題なく動作し、非常にきれいに見えることを認めなければなりません。外部のlessファイルはテストしていません。機能しない場合は、簡単に修正できます。

これを本番環境で使用するのは最善の考えではないとまだ思います（他の人がすでに述べた理由により）。

于 2012-09-19T02:10:56.133 に答える
4

@Baz1ingaに同意しますが、一般的にはクラスを追加および削除することでこれを行う方が簡単ですが、LESSスタイルの変数がはるかにうまく機能する特定のケースがあることも知っています（たとえば、色が前景の場合、背景の場合、またはところどころ薄くなってます）。これは間違いなく実行可能です。実際、これを実行するテスト済みのコードを次に示します (jQuery スタイルの構文を除いて、それが必要な特定の理由はありますか?)。

function update_css(newcss) {
    var id = "styleholder";
    if ((css = document.getElementById(id)) === null) {
        css = document.createElement('style');
        css.type = 'text/css';
        css.id = id;
        document.getElementsByTagName('head')[0].appendChild(css);
    }
    if (css.styleSheet) { // IE
        try {
            css.styleSheet.cssText = newcss;
        } catch (e) {
            throw new(Error)("Couldn't reassign styleSheet.cssText.");
        }
    } else {
        (function (node) {
            if (css.childNodes.length > 0) {
                if (css.firstChild.nodeValue !== node.nodeValue) {
                    css.replaceChild(node, css.firstChild);
                }
            } else {
                css.appendChild(node);
            }
        })(document.createTextNode(newcss));
    }
}

lessvars = {mycolor: "red"};

maincode = "div { color: @mycolor; }"; // this would be a long string, loaded via AJAX from a LESS file on the server

function compile_less(variables) {
    var variable_less = "";
    for (var variable in variables) {
        variable_less += "@" + variable + ": " + variables[variable] + ";";
    }
    new(less.Parser)({
        optimization: less.optimization
    }).parse(variable_less + maincode, function (e, root) {
        update_css(root.toCSS());
    });
}

compile_less(lessvars);

function set_less_var(name, value) {
    lessvars[name] = value;
    compile_less(lessvars);
}

上記の「update_css」関数は、less.js の「createCSS」関数から派生しています。残りは私が書きました。これで、いつでも次のような操作を実行して、色を変更し、その効果をサイト コンテンツにすぐに表示させることができます。

set_less_var("mycolor", "green");

(もちろん、「メインコード」はおそらくバックグラウンドで .less ファイルから読み込まれることに注意してください。簡単にするために、ここではそれらを変数に割り当てただけです。)

楽しみのために (私はお勧めしません) -- そして、私のコードがあなたが望むことをすると思うことを示すために -- 上記のコードを使用して実行できるようにする関数を次に示します$("@mycolor").value("black");。

function $(varname) {
    return {
        value: function(val) {
            set_less_var(varname.slice(1), val);
        }
    }
}
于 2012-04-23T04:48:01.487 に答える
2

ブラウザーでローカルに less コンパイラーを使用する場合、less 変数を変更する機能が追加されました。

less.modifyVars({
 '@buttonFace': '#5B83AD',
 '@buttonText': '#D9EEF2'
});
于 2015-08-05T15:31:56.697 に答える
1

c＃を実行でき、このサーバー側で実行したい場合、ポートdotlessは、ビジターパターンを実装して、吐き出される前にプログラムでlessastを変更するプラグインをサポートします...

于 2012-04-23T06:12:35.983 に答える
1

それは良いアイデアかもしれませんが、css / htmlが正しい場合、これはまったく必要ないはずです。「a」タグがたくさんある場合は、クラスをスタックできる正しい方法でcssする必要があります。あなたが非常に大きなウェブサイトを持っている場合、顧客はフォントなどの小さな変更に非常にうるさい場合があります。その場合、結果をカスタマイズするのは良いことです。結果を作るために変数を増やすよりも、CSS を使用するだけで簡単に解決できます。

1 つの色を変更したい場合は、検索ツールを使用し、検索と置換を使用してください。

css と一般的な知識を使用して、ウェブサイトを操作するスクリプトが多いほど、読み込み時間が長くなる結果を得ることができます。

よろしくお願いします

SP

于 2012-09-21T08:02:50.070 に答える
1

まず第一に、JavaScript はファイルに書き込めません。あなたができる最善の方法は、Javascript で XML を読み取って編集し、そのデータをサーバー側のスクリプトにポストしてファイルに書き込むことです。

一般に、人々は別のクラスを使用してこの問題に対処し、css ファイル自体を編集するのではなく、既存のクラスを新しいクラスに置き換えます。これは私にはかなり奇妙に聞こえます..

私はこのブログ投稿に出くわしました.これはあなたが探しているものかもしれません..彼は、要件に基づいてニューススタイルシートを取得するさまざまな方法を示しています.

于 2012-04-23T03:01:22.607 に答える