CSS, LESS, SASS, HSS support in FlashDevelop
Finally, FlashDevelop 4.1 (development build at the time of writing) includes first class CSS (and compiled CSS) support.
FlashDevelop has offered great HTML completion for years but CSS was so far only colored – this is something I wanted to improve for a long time but I had to focus on more immediate development goals. Eventually, Motion Twin offered to sponsor this development, requesting additionally that Nicolas Cannasse’s (Haxe creator) HSS compiler would be supported.
I spent a little week on it and I’m very happy with the result. Gathering all the CSS attributes and values was tedious and I even had to submit a C++ patch for the Scintilla editor to correctly colorize LESS/SASS/HSS files (single line comments, variables), but it was all worth it: it’s a real pleasure to use and a huge productivity improvement.
For CSS and HSS you don’t have anything to install – CSS minification is built-in and the (tiny) HSS compiler is included in FlashDevelop tools.
For LESS and SASS you have to install separately the corresponding compilers:
I think CSS completion in FlashDevelop is about as good as you can expect it to be: fast and clever. Supported features currently are:
- CSS attributes,
- contextual CSS values (ie. left/right/center/justify after text-align),
- pseudo-element and classes (ie. :hover, :first-child),
- browser-vendor prefixes,
- imbricated blocks,
- compiled CSS variables (the screenshot shows HSS syntax).
Compilation / optimization
Another big addition is:
- automatic compilation (for LESS, SASS and HSS)
- and minification (ie. styles.css > styles.min.css) as soon as you save the file.
Compilation errors immediately appear in the Results panel and you can double-click them to locate the problems.
Note that you can define optional arguments for the compilers by adding a comment with @options anywhere in the file:
// @options -t expanded
Everything can be configured and extended by editing the files in FD/Tools/css – it should be obvious enough
I know there is room for improvement so don’t hesitate to suggest what you feel is missing the most. And send me patches if you improve the dictionaries or add other CSS compilers!