CoffeeScript and Less

Transcript

4. BAD
5. var x = 10; x = 10
6. functions square = (x) -> x * x cube = (x) -> square(x) * x cube 4 # same as cube(4)
7. objects singers = {Jagger: "Rock", Elvis: "Roll"} kids = brother: 'paul' sister: 'jane'
8. arrays primes = [2, 3, 5, 7, 11, 13] frontEnders = [ 'dans' 'zsuzsa' 'gib' ]
9. loops eat food for food in ['toast', 'cheese', 'wine'] for el in document.querySelectorAll('h2') el.style.display = "none" for key, val of window console.log key, val
10. conditionals if happy and knowsIt clapHands() else showIt() action = if isHidden then "show" else "hide" doThings() unless x == 10
11. classes class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5
12. splats curryFirst = (fn, first) -> (rest...) -> fn.apply(null, [first].concat(rest))
15. variables @primary: #fa0000; a, a:visited { color: @primary; }
16. mixins .bordered(@colour: black) { border-top: dotted 1px @colour; border-bottom: solid 2px @colour; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered(pink); }
17. nesting .form-row { .clearfix; .textbox { border: 1px solid black; &:active { border-color: blue; } } }
18. operations @base: 5%; @filler: @base * 2; @other: @base + @filler;
19. colour functions lighten(@color, 10%); darken(@color, 10%);
20. import @import url('some.css'); /* bad*/ @import 'some.less'; /* good */