Using Jade and Sass with AngularJS

Login to Access Code

Jade lets you write very minimal code that is processed into HTML. Jade has equivalent syntax to HTML syntax, and it provides some new tricks so that you can reuse code (DRY) and incorporate JavaScript into HTML templates.

In the same spirit, Sass makes CSS easier to write and manage, especially for larger projects. Features of Sass make styling scale better, like Variables for storing repeated references to colors and font stacks or Inheritance for sharing a set of CSS properties from one selector to another.

In this screencast, see how a simple todo app using AngularJS was modified to use Jade and Sass.

Credit for the original AngularJS todo app goes to Takahiro Kubo who shared it via JSFiddle.