DSS Home :: dynamic-stylesheets - a new art of modular css design

What you see is what you get:

« stop play »

Variables

You can declare variables in your DSS style sheets and insert their value later, or use them in a mixin or a function.

DSS supports a number of value types that range from simple CSS types to more complex types. Numbers with units, images and strings are possible.


@myColor = 1px;

#header
{
	color: @myColor;
}

#container
{
	background: @myColor;
}

Mixins

Mixins are a very good way to give additional structure to your style sheets without the structure being visible in the final CSS.

A favorite example is how to create rounded corners using a mixin. Of course, you are able to use more than one parameter, to make tabs, or ellipsoids.


#divContainer 
{
	@roundedCorners(5px);
}

#mainContainer 
{
	@ellipticalCorners (9px, 2px);
}

Graphical functions

You can also write your own graphical functions. The resulting graphics are automatically converted to image files and cached.

There are some predefined functions and you are able to implement your own functions as well.


ul
{
  background: drawPoly(#fff, 1);
}

li
{
  background: drawPoly(#000);
}

960 Grid System

Of course, the 960 Grid System is ported to DSS, too. It is very easy to use, check out our two examples in our 960 Grid System sandbox!


#main-container 
{
	@grid12;
	#box1 
	{
		@column;
		@alpha;
	}
	
	#box2 
	{
		@column(15);
		@omega;
	}
}

Rule Block nesting

DSS offers a new approach to write CSS rules that many people find superior to the traditional way of writing CSS.

With DSS you can simply nest your rule definitions instead of writing long selector descendant chains.


#content
{
	color: #000;
	
	a
	{
		color: #00f;
	}
}

Expressions

DSS supports expressions which can contain arithmetic and comparison operators.

The expressions use the standard operator precedence rules for multiplication and addition.


#test
{
	padding: expr(@padding * @factor);

  
  /* 
	expr(1px + 3); is 4px
	expr(2 * 3px); is 6px 
	expr(2px != 2em); is true or 1
	expr(3px == 3em); false
  */
}

(C) Copyright 2010 QuinScape GmbH

dynamic-stylesheets is open source under the GPL v2 License.
Dynamic-stylesheets is a subproject of OpenSAGA (http://www.opensaga.org)