Feature: Wess (or WESS, or WeCSS, as you like...)
Developer: Nao
Target: themers, modders
Status: 100% (believed to be complete; given its nature, however, new features are being added regularly as needed.)
Comment:
This is one of the features that make me glad I made them, even though it took me many months of work. For the record, back in January 2011, I read an article about Sass, a CSS pre-parser written in Ruby. I already had plans to write something in that style, but they were nowhere near as advanced as their implementation, so I took inspiration and wrote my own PHP version. As a result, it's about 20 times smaller than Sass, and much faster. It's also a bit less elegant (in that it doesn't optimize resulting rules), and stricter in its structure, but I consider this to be a good thing. Finally, Wess also deals with JavaScript and CSS compression, although the line between Class-CSS[1] and Subs-Cache[2] is becoming increasingly blurrier. (Is that proper English?)
Given that Wess is an extremely complete (and sometimes overwhelming) implementation, it deserves, and will eventually get, its own documentation in the near future.
In the meantime, here's an incomplete list of features:
- selector inheritance ('extends' keyword),
- multiple inheritance (both from and to),
- prevent single rules from being inherited by children ('final' keyword),
- cancel inheritance ('unextends' keyword, useful for inherited skins),
- delete a property entirely ('@remove' command),
- reset a selector's earlier styles ('@reset' command, also useful for inherited skins),
- declare virtual selectors that will disappear once they're mixed or inherited.
- nested selectors,
- normal or simplified syntax (no {}; etc.),
- color manipulation functions,
- math functions,
- mixins (supporting parameters),
- variables,
- @if/@else/@endif (test for a browser or environment, and execute CSS accordinly),
- @is (basically an inline @if),
- & shortcut (current selector),
- cross-browser gradients,
- prefix-free CSS3 styles (just the common ones),
- grouping of properties with identical values (e.g. height, line-height: 20px),
- RGBA emulation in IE,
- and inline graphics where supported (can be disabled on a per-file basis.)
The example below is taken straight from our current index.css, and it uses many of the aforementioned features... Try to figure out what does what!
Developer: Nao
Target: themers, modders
Status: 100% (believed to be complete; given its nature, however, new features are being added regularly as needed.)
Comment:
This is one of the features that make me glad I made them, even though it took me many months of work. For the record, back in January 2011, I read an article about Sass, a CSS pre-parser written in Ruby. I already had plans to write something in that style, but they were nowhere near as advanced as their implementation, so I took inspiration and wrote my own PHP version. As a result, it's about 20 times smaller than Sass, and much faster. It's also a bit less elegant (in that it doesn't optimize resulting rules), and stricter in its structure, but I consider this to be a good thing. Finally, Wess also deals with JavaScript and CSS compression, although the line between Class-CSS[1] and Subs-Cache[2] is becoming increasingly blurrier. (Is that proper English?)
Given that Wess is an extremely complete (and sometimes overwhelming) implementation, it deserves, and will eventually get, its own documentation in the near future.
In the meantime, here's an incomplete list of features:
- selector inheritance ('extends' keyword),
- multiple inheritance (both from and to),
- prevent single rules from being inherited by children ('final' keyword),
- cancel inheritance ('unextends' keyword, useful for inherited skins),
- delete a property entirely ('@remove' command),
- reset a selector's earlier styles ('@reset' command, also useful for inherited skins),
- declare virtual selectors that will disappear once they're mixed or inherited.
- nested selectors,
- normal or simplified syntax (no {}; etc.),
- color manipulation functions,
- math functions,
- mixins (supporting parameters),
- variables,
- @if/@else/@endif (test for a browser or environment, and execute CSS accordinly),
- @is (basically an inline @if),
- & shortcut (current selector),
- cross-browser gradients,
- prefix-free CSS3 styles (just the common ones),
- grouping of properties with identical values (e.g. height, line-height: 20px),
- RGBA emulation in IE,
- and inline graphics where supported (can be disabled on a per-file basis.)
The example below is taken straight from our current index.css, and it uses many of the aforementioned features... Try to figure out what does what!
| .catbase virtual overflow: hidden border-radius: 5px padding: 5px 10px 5px margin-bottom: 4px border: 1px solid rgba(0,0,0, .15) font: 700 1.4em/20px $big_font img vertical-align: -3px .cat extends .catbase background-color: #b3afa9 color: white a color: white text-decoration: underline font-size: .92em text-shadow: none :hover color: #fc9 | .cat final background-color: #c3b9c3 border-color: #fd9604 border-width: 2px 0 0 0 text-shadow: black 0 1px 2px .table_list & margin: -5px .title extends .cat padding: 4px 8px border, margin: 0 #sidebar & margin-top: 6px a color: #faf8f8 |
| 1. | The main Wess core... |
| 2. | The list of functions that create the actual CSS and JS files and pass them through Wess or other functions. |
