CSS, LESS, SASS, HSS support in FlashDevelop

image

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.

Installation

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:

Completion

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

Going further

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!

10 thoughts on “CSS, LESS, SASS, HSS support in FlashDevelop

  1. Thanks a lot, you saved tons of hours of work 🙂

    It would be great to be able to choose the “:” cursor position after completing and attribute (ie. like “font-size”). Currently, the cursor is placed after the “:”, and it would be nice to be able to eitheir disable the “:” or allow to place the cursor before “:”. It would allow to code like this :

    font-size : 10pt;
    color : red;

    instead of :

    font-size: 10pt;
    color: red;

  2. Sébastien, you can disable the insertion of ‘:’ in CssCompletion plugin settings 🙂

    I’m noting that various options around colon placement are desirable: compact, padded, aligned (with other attributes), and I’ll look into it.

  3. @ade There is no reason to have a version of FlashDevelop for mac, after Apple said that flash is dead.
    Anyway you could ask to apple to implement this features in xcode…

  4. Great work mate! My only problem is I need to now turn it off because I want the files to appear in a different place and have a custom compiler to do that (yeah, annoying I know). So it is slower for me now …

    Guess I’ll find out how to turn it off somewhere …

Comments are closed.