Why Madness? Because you may become crazy for it. Or over it.Or maybe just watching this "Powerpoint" will drive you insane.
PreprocessorsAKA - The "Peoples Patch"Our alternative to the cross browser wars.At least for the time being...
Learn CSS and good practices firstPreprocessors are not a replacement for goodcoding, planning and design.
What is preprocessing?Preprocessing is essentially creating theequivalent of a Photoshop file or a suped upmailing template for your css.It gives you added umph to your work.Sometimes making it easier.Occasionally it might be overkill.
Why do it?Do you like to type the same thing over and over?Do you enjoy trying to hunt down a tiny bit of codesomewhere in thousands of lines of code and then usingfind and replace hoping itll work?No?Use preprocessing.
Most of all - DRY practices Dont Repeat Yourself
Other reasons● CSS 3 browser prefixes● Responsive design● Other people are using it, so you want to have a clue.● Efficiency● Better organization● Faster sites and better SEO
Disadvantages● Learning curve● Team Maintenance● Yet another layer● Code bloat● Selectoritis
Methods and Approaches● SASS/SCSS● LESS● Stylus● cleverCSS● cssCrush● prefixer (http://prefixr.com/)● force browser to interpret PHP as CSS
Were going over the two mostpopular preprocessors tonight LESS and SASS/SCSS Well be glossing over some stuff in the interest of time and clarity
Lets go over what they shareEach of them now share most of each otherscapabilities with some minor differences insyntax.The following examples are from ChrisEppsteins gits on: https://gist.github.com/674726Thanks Chris!
DifferencesAs with anything, there are advantages anddisadvantages of going with various options.LESS and SASS are no different.Or rather they are in some ways...
Extra features of SASS/SCSS● Can properly "extend" other classes.● True if, for, while and each control directives (Logic)● Global scoping of variables● Compass (sprites)● Origin line reporting● Good Rails integration● Various output styles● Real functions that return values
To compile locally or on the server?Considerations:PerformanceCoordinationCachingServer install
Lets demo some Bootstrap n Stuff! Go Charles go!
Hands on part!Lets do LESS firstGet the example material or use your ownhttp://files.meetup.com/1962521/basicHtmlCss.zipGet the basic jshttp://lesscss.org - bonus points - download twitter bootstrapGet a complierMac OSX http://incident57.com/less/Windows http://winless.org/Linux/Mac/PC http://wearekiss.com/simplessGet an editor or download the code hintershttp://www.sublimetext.com/
Already have the LESS stuff?To install SASS/SCSSGo here: http://sass-lang.com/tutorial.htmlDownload the Windows Installer if youre on Windows.http://rubyinstaller.org/After that, go to http://compass-style.org/install/Follow instructions to install both SASS and CompassDownload either Scouthttp://mhs.github.com/scout-app/Compass app is good too. Just paid.Configure your editorI recommend SublimeText along with the Package Installer to installSCSS/LESS code hinting.
"Converting" your existing CSSReally just nests it.LEASThttp://toki-woki.net/p/least/SASS# Convert Sass to SCSS$ sass-convert style.css style.scss
CompilingYou can use tools or the command line.SCSS users may need to delve into theirconfig.rb file or just use the tools.LESS users might just want to use the tools tosetup publish paths.
Lets have fun with variables @myvariable or $myvariable