DCSS - CSS extensions that make writing stylesheets less verbose

Information for version 0.3.0

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

<% 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 %>;
}

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 which also allows constants to include spaces and commas.

Example

@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;
}

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:

template_color: #fff;
...
template_color: #000;

…will result in template_color having value #000 in all places.

To use constant’s value simply type it’s name anywhere in the code:

body {
  color: constant_name;
}

Note that since anything can be constant’s value it is also possible to use it to hold attribute or even selector:

@server constants {
	body: #fff;
}

body {
	color: body;
}

This will be evaluated to

#fff {
  color: #fff;
}

..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 {{ }} syntax:

#someid { color: blue } {{
  a { color: green; }
}}

Which renders to:

#someid { color: blue }
 #someid a { color: green; }

Leaving out the parent properties is ok:

#someid {{
  a { color: green; }
}}

becomes:

#someid a { color: green; }

Nested and comma separated selectors also work:

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; }
  }}
}}

renders to:

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; }

Installation

Using RubyGems

Download and install DCSS with the following command (won’t work until I rubyforge account is created, see below):

gem install --remote dcss

Manual

Download the gem file from my website while I wait for my rubyforge account to get activated. After that it will be available at the project page. Install it with following command

gem install dcss-0.3.0.gem

Usage

Command line

NAME

dcss - process rich CSS files

SYNOPSIS

dcss [DCSSFile]

DESCRIPTION

Reads and processes DCSS files. Processed file is printed to standard
output. If no file is given standard input is processed instead.

EXAMPLE

dcss default.dcss > default.css

Rails

Run

./script/install http://svn.ducknewmedia.com.au/public/rails_plugins/dcss

Credits

Shaun Inman

For the original PHP version of CSS-SSC

Lukasz ‘Bragi Ragnason’ Piestrzeniewicz

For RCSS

License

DCSS is available under an MIT-style license.

:include: MIT-LICENSE

Warranty

This software is provided “as is” and without any express or implied warranties, including, without limitation, the implied warranties of merchantibility and fitness for a particular purpose.