-
Notifications
You must be signed in to change notification settings - Fork 2
Home
silentmatt edited this page Sep 13, 2010
·
16 revisions
DSS stands for Dynamic Style Sheets.
- Constants
- “Classes” (groups of properties/values that can be inserted into a rule)
Classes can have parameters, with optional default values.
@class centered<width; margin: 0px> { width: param(width); margin: param(margin) auto; }
- Includes (@import, but not restricted to the beginning of the stylesheet, and DSS does the inclusion, not the browser).
- Calculated values
@define { border-size: 1px; } .box { border: @border-size solid; width: calc(100px - 2 * @border-size); /* subtract the border size */ height: [ prop(width) / 1.6 ]; /* Make the ratio 16:10 */ }
- Conditional rules (if/else). “&&” (and), “||” (or), “^” (exclusive or) and “!” (not) operators are supported. For numeric/calculated terms, non-zero is true. Class reference terms (the parameter list is required, but can be empty) are true if the class exists in the current scope. const() and param() terms are false if they don’t exist or their value is “false” or “no”. All other terms are assumed to be constant references, except URLs, which are not supported, and the keywords “true” and “false”.
@if (compact) { /* compact is a constant (or class parameter) */ @define { width: 100px; } body { margin: 0px; } } @else { @define { width: 960px; } }
- Compressed output. Unnecessary whitespace is removed from the output.
Eventually, some automatic cross-browser properties. For example:
.semitransparent { opacity: 0.5; }
Would turn into:
.semitransparent { opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); }
There’s not much documentation in the code (yet), but the Main class is very simple, so it should be easy to figure out how to use the library.
There’s a simple command-line DSS processor included with the library. You can run it like this:
java -jar dss.jar [-o|--out <output-file>] <input-url>