* Title

* Content

Main features: * Create rich CSS files using: * ERB templates * Server-side constants * Server-side classes (preliminary) * Process DCSS files off-line using command line executable * Also available as a rails plugin === ERB templates Example [code] <% template_color = "#000" template_background = "#fff" template_highlight = "#fa3" %> body { color: <%= template_color %>; background-color: <%= template_background %>; } h1 { color: <%= template_background %>; background-color: <%= template_highlight %>; } [/code] === Server-side Constants Server-side Constants were originally developed by Shaun Inman in PHP. SSC extends CSS syntax in a simple way. SCC is cross-platform and easy to use. DCSS uses the constants implementation from RCSS[http://rcss.rubyforge.org/] which also allows constants to include spaces and commas. Example [code] @server constants { template_color: #000; template_background: #fff; template_highlight: #fa3; // Rcss specific (note spaces and commas) template_font: "Trebuchet MS", "Bitstream Vera Sans", helvetica, sans-serif; } body { color: template_color; background-color: template_background; font-family: template_font; } h1 { color: template_background; background-color: template_highlight; font-family: template_font; } [/code] There might be several constants/variables blocks in the same file. It does not matter where in CSS file they appear, their contents are still applied to whole file. When a constant is redefined only later occurrence is taken into account so: [code] template_color: #fff; ... template_color: #000; [/code] ...will result in <code>template_color</code> having value <code>#000</code> in all places. To use constant's value simply type it's name anywhere in the code: [code] body { color: constant_name; } [/code] *Note* that since anything can be constant's value it is also possible to use it to hold attribute or even selector: [code] @server constants { body: #fff; } body { color: body; } This will be evaluated to #fff { color: #fff; } [/code] ..which probably is not what one might expect. For that reason avoid using CSS selector and attribute names as constant names. === Nested Descendant Selectors DCSS introduces the following <tt>{{ }}</tt> syntax: [code] #someid { color: blue } {{ a { color: green; } }} [/code] Which renders to: [code] #someid { color: blue } #someid a { color: green; } [/code] Leaving out the parent properties is ok: [code] #someid {{ a { color: green; } }} [/code] becomes: [code] #someid a { color: green; } [/code] Nested and comma separated selectors also work: [code] body.home, #specialpage { margin: 10px auto; width: 700px; } {{ h1 { font-family: Arial, sans-serif; } a, a:visited { color: blue; } p > span { font-size: 1.2em; } #someid { background: red; } {{ h1 { font-family: Georgia, serif; } }} }} [/code] renders to: [code] body.home, #specialpage { margin: 10px auto; width: 700px; } body.home h1, #specialpage h1 { font-family: Arial, sans-serif; } body.home a, body.home a:visited, #specialpage a, #specialpage a:visited { color: blue; } body.home p > span, #specialpage p > span { font-size: 1.2em; } body.home #someid, #specialpage #someid { background: red; } body.home #someid h1, #specialpage #someid h1 { font-family: Georgia, serif; } [/code]

How do I format code and text?

To check that you are human, please answer the following question.

* What is 14 minus 4?