You're viewing all posts tagged with javascript

LESS, Easier Chance + Ace 2.0

Ace 2.0 theme compiler, Chance, just gained a few extra goodies: it post-processes with LESS, has an extra directive, and is now easier to invoke.

Before you can use it, you’ll have to install LESS (in addition to Chance’s other prerequisites), but that is easy: “sudo gem install less”. Now you can build by simply going to the Ace 2.0 folder—sproutcore/themes/sc_ace—and running “./build”

In addition to LESS, a new Chance directive has been added: @theme. It maintains a stack of class names to be added to any view.

What do LESS and this new directive provide?

Take a look at this before and after (ironically, in reverse order):

As you can see, @theme is being used to keep track of the “sc-small-size” class name, and LESS allows nesting.

Together, they make the CSS dramatically more readable.

Styling a new Ace 2.0 button size (art and sample controls app already set up).

New version of Sample Controls app! Yay!