HTML Preprocessors


Haml and Sass are far from the only preprocessing languages available, including JavaScript preprocessors as well. Some of the other popular preprocessors including Jade, Markdown, Slim, LESS, Stylus, and CoffeeScript.

Sass and HAML

http://learn.shayhowe.com/advanced-html-css/preprocessors

 HAML Compiled HTML
  

 SASS Compiled CSS
 
  1. .portfolio
  2. border: 1px solid #ccc
  3. font:
  4. family: Baskerville, Palatino, serif
  5. style: italic
  6. ul
  7. list-style: none
  8. li
  9. float: left
 
  1. .portfolio {
  2. border: 1px solid #ccc;
  3. font-family: Baskerville, Palatino, serif;
  4. font-style: italic;
  5. }
  6. .portfolio ul {
  7. list-style: none;
  8. }
  9. .portfolio li {
  10. float: left;
  11. }


 CoffeeScript JavaScript
 # Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list) var cubes, list, math, num, number, opposite, race, square, __slice = [].slice; number = 42; opposite = true; if (opposite) { number = -42; } square = function(x) { return x * x; }; list = [1, 2, 3, 4, 5]; math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); } }; race = function() { var runners, winner; winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : []; return print(winner, runners); }; if (typeof elvis !== "undefined" && elvis !== null) { alert("I knew it!"); } cubes = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results; })();













Comments