Since every time the HSS file is modified the CSS file needs to be regenerated, it's better if the website itself automatically runs HSS when it notices that the HSS file has changed, and displays errors if any occurs.

HSS is a CSS compiler which supports valid CSS syntax, so for every error that occurs during the parsing of the HSS file, it will display and error indicating at which file and which line the error occurred.

HSS also enforce additional syntax rules. While this is valid CSS, the following is not HSS-valid since there is a missing semicolon at the end of the color value :

pre {
color : #FF0000
}

In that case, you will get an error telling :

myfile.hss:3: Unexpected '}' maybe missing ;

Fix all the errors and HSS will then be able to generate the corresponding CSS file.

Variables are a very good way to avoid replacing everything in a CSS file every time you want to change a single color value. It also helps designers to remember and easily locate the main colors that are used in a given website.

As you can see, such nested structure provides much more readability and maintainability than flatten one. Using nested blocks is very good way to express complex structures and avoid class name clashing.

There are two kind of comments possible in HSS, which are the same used in popular syntax such as C/Java. The /* ... */ comment is a multiline comment which is already part of CSS and the // .... comment is used for single-line comment.

background-color : rgba(r,g,b,a) : will add a solid color default value for browsers which don't support rgba, and also add some IE6-8 hacks that correctly display the transparent background color. The only drawback is that the block background image will display below the background color.

hss-width and hss-height : will generate width and height from which will be subtracted the padding and border values declared in the current block.

background : linear-gradient(#color1,#color2) : will add support for all browsers, including IE6-8 New in 1.4

You can also add @include('some css string)'' either at the top level or instead of an attribute, this will include raw CSS string in the output, prefixed with the hierarchy classes if any New in 1.4