2009-07-02 132 views
2

我一直在看LESS(http://lesscss.org/),它爲CSS增加了像CSS樣式的變量和宏特性。這意味着你可以在某個地方定義一個RGB顏色,然後通過你的CSS使用該變量。基本上,它看起來像一個非常酷的解決方案。推薦擴展CSS的好方法

但是,它依賴於Ruby,它不是我正常的開發堆棧的一部分,所以我想在這裏問我是否有人知道用其他語言實現的類似CSS擴展,我可以添加到我的工具鏈更容易? 謝謝。

+0

我無法提供幫助,但是工具鏈中包含哪些語言? – 2009-07-02 08:49:57

回答

1

一個recent article in Smashing Magazine提到了以下工具:

dtcss(PHP預處理對CSS)

#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(基於jQuery) - 見喬納森的回答

我沒有與任何這些方面的經驗,但我很想從別人:)

0

你可以通過php'google'變量css。有各種網站,告訴你如何使用PHP來生成你的CSS。
如果您正在爲網站開發主題,那麼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文件。它很聰明 - 使用緩存副本,添加與緩存相關的heqders,清理代碼/樣式。最重要的是,它支持基本的CSS變量。

它是用PHP編寫的。