2009-07-02 12 views
2

私は、CSSに変数やマクロのような機能を追加するLESS(http://lesscss.org/)を見てきました。これは、RGBカラーをどこかで一度定義してから、その変数をCSSですべて使用できることを意味します。基本的には、本当にクールなソリューションのように見えます。CSSを拡張する良い方法をお勧めします

しかし、それは私の通常のdevスタックの一部ではないRubyに依存するので、他の言語で実装されている同様のCSS拡張機能を誰かが知っているかどうかを私がここで尋ねると思いますより簡単に私のツールチェーンに?おかげさまで

+0

私はお手伝いできませんが、あなたのツールチェーンの一部の言語は何ですか? –

+0

ネイティブアプリ(またはC++などのほとんどのコンパイル言語)、java、javascript、phpなどがあります。私はRubyではないものに興味があり、そこに何もない場合は、箇条書きにしてRubyをインストールします。 –

+0

FWIW、ワンクリックインストーラー(Windows)を使用してRubyをインストールしたばかりですそして「宝石は少ない」と私はやった。スーパーシンプルで何も壊さない...私はそれを強く勧めます。 –

答えて

1

recent article in Smashing Magazineは、以下のツールを言及:

dtcss(CSSのためのPHPプリプロセッサ)

(jQueryのに基づいて)
#define mp margin, padding 
#define bg background 
#define fg color 

#define FONT Verdana, sans-serif 

html, body { 
     mp: 0; 
     bg: #000; 
     fg: #eee; 
} 
body { 
     font: small FONT; 
} 
input, textarea { 
     font: 1em FONT; 
} 

.fancy { 
     border-top-left: 2px solid #00f; 
     border-bottom-right: 4px dashed #f00; 
     b { 
       color: yellow; 
     } 
} 

JSON CSS - 私はこれらのいずれかの経験を持っていないが、私は他の人からの経験を聞くことに興味があると思いジョナサンの答え

を参照してください:)

0

あなたはgoogle '変数css via php'を使用できます。あなたのCSSを生成するためにPHPを使用する方法を示すさまざまなサイトがあります。
ウェブサイトのテーマを開発している場合は、php-cssのルートが便利です。

0

一定の議論がありますが、私は本当にCSS JSONの背後にある概念が好きです。もちろん、これは、javascriptが有効になっていないと、あなたのスタイルも消えてしまうことを意味します。

コードあなたの価値を決定する際に、関数、変数、および多くを使用する能力を与えてJSONであなたのスタイルルール:

var cssjson = { 
    ".copy-1":{ 
    "font-family":"Verdana, Geneva, Arial, Helvetica, sans-serif",   
    "font-size":"11px", 
    "color":"#CCC" 
    }, 
    "div#container div#header":{ 
    "CSSJSON-INHERIT-SELECTOR":".copy-1", 
    "position":"absolute", 
    "top":"12px", 
    "left":"4px" 
    } 
} 

これは、その後CSSugarのようなツールに取り込まれ実装されました:

CSSugar(
    { 
    //match every even tr element 
    "tr:even" : { 
     "background": "pink" 
    }, 
    //match every input element of type text 
    ":text" : { 
     "fontFamily": "Verdana", 
     "fontSize": "11px", 
     "color": "green" 
    }, 
    //match the second div in the body 
    "body div:gt(1)" : { 
     "background": "orange" 
    } 
    }, 
    //lets use the jQuery selector engine 
    $ 
); 
//now feel the power, even in IE6! 
1

CSSを見る& JS:http://taat.pl/en/cssjss/#additional

これは、JavaScriptとCSSファイルをオンザフライで圧縮する簡単なスクリプトです。スマートです - キャッシュされたコピーを使用し、キャッシュ関連のヘクスターを追加し、コード/スタイルを整理します。その上には、基本的なCSS変数がサポートされています。

これはPHPで書かれています。

関連する問題