8. “The Web Developer Wonderland
(a happy land where browsers don't need a
Refresh button)
CSS edits and image changes apply live.
CoffeeScript, Sass, LESS and others just work.”
-- the Livereload website
9. “What does LiveReload do?
LiveReload monitors changes in the file system. As soon
as you save a file, it is preprocessed as needed, and the
browser is refreshed.
Even cooler, when you change a CSS file or an image, the
browser is updated instantly without reloading the page.”
-- the Livereload website
10. writing 8 lines of CSS to
create 1 simple cross
browser gradient is a PITA...
-- everybody, all the time
11. .box_gradient {
// Old browsers
background: black;
// FF3.6+
background: -moz-linear-gradient(top, black 0%, white 100%);
// Chrome,Safari4+
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, black), color-stop(100%, white));
// Chrome10+,Safari5.1+
background: -webkit-linear-gradient(top, black 0%, white 100%);
// Opera 11.10+
background: -o-linear-gradient(top, black 0%, white 100%);
// IE10+
background: -ms-linear-gradient(top, black 0%, white 100%);
// W3C standard
background: linear-gradient(to bottom, black 0%, white 100%);
// IE6-9
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='black',endColorstr='white',GradientType=0);
}
14. Codekit != Livereload
• Does almost the same • BUT:
• compiles all the CSS • it only auto reloads
Preprocessors webkit browsers on
your Mac (it controls
• Lints your Javascript them using
AppleScript
• optimizes your Images
• no Firefox or Opera
• combo handles your
CSS and Javascript • no mobile Devices ;-(
15. well if it’s *THAT* easy
I could as well give
it a try, right?
me, after having seen this toggle countless times...
17. “Sass makes CSS fun again. Sass is an extension of
CSS3, adding nested rules, variables, mixins,
selector inheritance, and more. It’s translated to
well-formatted, standard CSS using the command
line tool or a web-framework plugin.”
-- the Sass Website
101. SASS ultimately won out because it's
the most mature, easiest to find
information and help about, seems
to have the most active and robust
development, and has the least bugs.
-- Chris Coyier, just recently
http://css-tricks.com/musings-on-preprocessing/