1. .LESSan overview of the CSS preprocessor/* Joe Seifi @joeseifi */

2. When I am working ona problem, I never thinkabout beauty, but whenI have nished, if thesolution is not beautiful,I know it is wrong.Buckminster Fullerhttp://www.flickr.com/photos/21680590@N06/4654423909/ 3. http://www.flickr.com/photos/kejun/6988320204/authoring abstractions have matured... 4. why less?CSS is fine... I dont wanna add more complexity to it?Do we have to learn a new programming language? 5. just a few reasonsCSS is fine... yes, but our needs have outgrown its features.Using CSS on a big project quickly becomes... 6. http://www.flickr.com/photos/stevendepolo/3340172798/complex, 7. http://www.flickr.com/photos/stevendepolo/3340172798/messy, 8. http://www.flickr.com/photos/nathalier/3349184641/& hard to manage. 9. http://www.flickr.com/photos/bohman/201715020/Existing code is tough to maintain or update, 10. http://www.flickr.com/photos/northbaywanderer/121971388/becomes unreadable, 11. http://www.flickr.com/photos/miran/4538440349/and is not reusable. 12. http://www.flickr.com/photos/via/42436087/less gives us new tricks, tools, 13. http://www.flickr.com/photos/jdhancock/3578775702/and its fun to use. 14. http://www.flickr.com/photos/shollingsworth/3069791717/getting started with less... 15. /* Windows? ------------------------------Try tools like WinLess or SimpLESS. You can also install less buildersfor most code editors like Sublime Text 2 and Eclipse (see references.)http://winless.org/ http://wearekiss.com/simpless*/installinstall brew $ ruby a{background-color:#ccc;padding:10px 15px;font-weight:700;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:0 1px 3px 0 #6a6a6a;-moz-box-shadow:0 1px 3px 0 #6a6a6a;-webkit-box-shadow:0 1px 3px 0 #6a6a6a;background-image:linear-gradient(top,#fff,17%,#d3d3d359%);background-image:-o-linear-gradient(top,#fff 17%,#d3d3d3 59%);background-image:-moz-linear-gradient(top,#fff 17%,#d3d3d3 59%);background-image:-ms-linear-gradient(top,#fff 17%,#d3d3d359%);background-image:-webkit-linear-gradient(top,#fff 17%,#d3d3d3 59%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0.17,#fff),color-stop(0.59,#d3d3d3))}header#navigation ul li>a.selected{background:#fff}header #navigation ul li>a:hover{color:#f00} 19. /* Notes: ------------------------------The less compiler will find syntax errors as well as errors withundefined variables. You can also try csslint on your output files, butbe ready to get your feelings hurt.*/debugginghtml {font-size 100%;}$ lessc source.less$ ParseError: Syntax Error on line 2 in source.less:2:01 html {2 font-size 100%;3 } 20. /* Inner Workings: ------------------------------Node compiles matching .less files when it receives a URL request fora .css resource. For example if you hit http://localhost/style.less Nodelooks for a style.less file in the same path and compiles it into astyle.css file on the fly and returns it to you.*/node.js & less middlewareapp.configure(function(){app.use(require(less-middleware)({src: __dirname + /public,compress: true,yuicompress: true, // one or the otheroptimization: [0,1,2]}));} 21. http://www.flickr.com/photos/papalars/777342980/imports in less 22. /* Tips: ------------------------------LESS will import the contents of files and concatenate them into the onefile, unless you specify the .css extension. If you leave out the extensionLESS looks for a .less file, not a .css file.*/imports@import reset.css; // statement is left alone in output@import reset.less; // processed and contents imported into output@import reset; // same as above since the .less is optional 23. http://www.flickr.com/photos/75491103@N00/3565601486/nesting in less 24. /* Notes: ------------------------------Nesting in LESS results in scope. We will cover scope in a few minutes.Nesting order, spacing, and tabs are purely for readability. So you canalso do things like: li > a.selected {} though it is not recommended.*/nesting#navigation {li {display: inline-block;&:first-child { padding: 5%; }> a {&.selected { color: gray; }&:hover { background: red; }}} 25. /* Notes: ------------------------------Keep in mind that in less, variables are actually constants, so they canonly be defined once.Its good practice to line up your variable columns for good readability.*/variables@base-font-size: 16;@base-padding: 5%;@base: /images;@light-gray: #D3D3D3; 26. /* Hint: ------------------------------Most LESS aware editors like Coda 2 will suggest and auto-complete yourdefined variable names as you type.*/using variables.box {padding: @base-padding;background-color: @light-gray;} 27. http://www.flickr.com/photos/75491103@N00/3565601486/using strings in less 28. /* Details: ------------------------------Embed and use variables using the @{variable} syntax, like PHP or Ruby.*/string interpolation@base: /images;@light-gray: #D3D3D3;body {background: @light-gray url("@{base}/bg.png");} 29. /* Details: ------------------------------Tilde escapes the value. You can also use the e() function if you like.Use it for value calculations, otherwise the output becomes font-size:20px not 20px. Also use the ~ with IE specific rules like filter.*/escaping strings@base-font-size: 16;body {font-size: ~"@{base-font-size}px";filter: e("ms:likesProprietaryCssStuff()");} 30. http://www.flickr.com/photos/maisonbisson/201844037/math operations 31. /* Notes: ------------------------------Basic math operations (+ - * /) are supported in less. Whats great isthat any CSS value, number, or color, plus any less variable can beoperated on. This includes things like %, em, px, etc.More on color operations later in this presentation.*/math operations@base-padding: 5%;@gutter-padding: @base-padding * 2;@light-gray: #D3D3D3;@body-padding: @gutter-padding - 3; // 7%@body-color: @light-gray / 4; // #353535 32. /* Notes: ------------------------------Other Math functions like abs, max, min, random, etc. are not supportedat this time.*/math functions@width-flexible: percentage( 650 / 960 ); // 67.70833333333334%@width-round: round( @width-flexible ); // 1%@width-ceil: ceil( @width-flexible ); // 1%@width-floor: floor( @width-flexible ); // 0% 33. http://www.flickr.com/photos/rickchung/7832568498/mixins 34. /* Notes: ------------------------------Mixins are functions in less. They help you reuse css code.Keep in mind that this .button mixin is actually is a basic CSS class inLESS and will appear in your output file as such.*/mixins.button {! box-shadow: inset 1px 1px 5px 0px @light-gray / 2;! -webkit-border-radius: 5px;! -moz-border-radius: 5px;! border-radius: 5px;} 35. /* Notes: ------------------------------The opening and closing parentheses are not required when calling asimple mixin like this without parameters. You always do have to includethe semi-colon.*/using mixinsa {.button;}/* The result will be */a {! box-shadow: inset 1px 1px 5px 0px @light-gray / 2;! -webkit-border-radius: 5px;! -moz-border-radius: 5px;! border-radius: 5px;} 36. /* Notes: ------------------------------The first part of the parameter is the name and the second part is theoptional default value. Parameterized mixins are not included in theresulting .css files by the LESS compiler.*/mixins with parameters.ems(@size: @base-font-size, @base: @base-font-size) {! @value: @size / @base;! font-size: ~"@{value}em";} 37. /* Notes: ------------------------------Our mixin takes 2 paramters. Weve made them both optional, so we canalso call the it using just .ems(24); or .ems(); or .ems; in this case.It is good practice to provide default values in your mixin definitions.*/passing mixin parameters.title {! .ems(24, 16);}/* The result will be */.title {! font-size: 1.5em;} 38. /* Notes: ------------------------------When you call the .h1 mixin you will get the result from the ems mixin aswell as the bold font, assigned to your calling class.*/mixins calling other mixins.heading {! .ems(32);! font-weight: 700;}h1 { .heading; }/* The result will be */h1 {! font-size: 2em;! font-weight: 700;} 39. http://www.flickr.com/photos/clydeorama/6327739969/arguments 40. /* Notes: ------------------------------If you just use the @arguments variable, it will spit out the values youneed based on what is passed in and what defaults youve set up, in theorder you defined them.*/the @arguments variable.box-shadow(@x: 0, @y: 0, @blur: 1px, @spread: 1px, @color: #000){! box-shadow: @arguments;! -moz-box-shadow: @arguments;! -webkit-box-shadow: @arguments;} 41. /* Notes: ------------------------------You can only leave out arguments at the end of an argument list, but notthe beginning. For example you can do .box-shadow(0px, 0px, 3px); but youcant do .box-shadow(0px, @light-gray / 2)*/using @arguments.button {.box-shadow(0px, 0px, 3px, 0px, @light-gray / 2);}/* The result will be */.button {box-shadow: 0px 1px 3px 0px #6a6a6a;-moz-box-shadow: 0px 1px 3px 0px #6a6a6a;-webkit-box-shadow: 0px 1px 3px 0px #6a6a6a;} 42. http://www.flickr.com/photos/passetti/5605375493/less makes color fun 43. /* Super Geeky stuff: ------------------------------LESS first converts colors into the HSL (hue, saturation %, lightness %)color-space, and then manipulates them at the channel level.*/colors@green: #00FF00;lighten(@green, 30%); // #99ff99 - 30% *lighter*darken(@green, 30%); // #006600 - 30% *darker*saturate(@green, 30%); // #00ff00 - 30% *more* saturateddesaturate(@green, 30%); // #262926 - 30% *less* saturated 44. /* Super Geeky stuff: ------------------------------The mix function requires a weight argument between 0-100.The fade functions always return rgba values, unless the color has hit amax alpha, such as blue above, which cant be made less transparent.*/more color functions@blue: #0000FF;@red: #FF0000;fade(@blue, 50%); // rgba(0,0,255,0.5) - 50% transparencyfadein(@blue, 30%); // #0000ff - 30% *less* transparentfadeout(@blue, 30%); // rgba(0,0,255,0.7) - 30% *more* transparentspin(@blue, 30); // #7f00ff - 30 degrees larger huespin(@blue, -30); // #007fff - 30 degrees smaller huemix(@blue, @red, 50); // #800080 - a mid blend of @red and @blue 45. http://www.flickr.com/photos/tomorrowstand/2280680315/patterns 46. /* Notes: ------------------------------Mixin changes behavior based on parameters.The first mixin will only match if our @display-type variable has a valueof block and the second one will only run if is set to inline. The @_argument matches any value.*/switch patterns.switch-me (box, @color) { border-radius: 0; }.switch-me (round, @color) { border-radius: 5px; }.switch-me (@_, @color) { color: @color; }color: @color;.button { .switch-me(@display-type, 300px); }// Output.button {display: block;width: 300px;} 47. /* Notes: ------------------------------LESS inspects all defined mixin signatures and only applies the one(s)that matches your called arity.*/switch on arity.flex-box (@min) { min-width: @min; }.flex-box (@min, @max) { min-width: @min; max-width: @max; }.content {.flex-box(200px, 800px);}// Output.content {min-width: 200px;max-width: 800px;} 48. http://www.seifi.orgguards 49. /* Notes: ------------------------------LESS uses the when keyword instead of if/else statements.You can use the following comparison operators < =< = >= >*/guarded mixins.mixin (@a) when (lightness(@a) >= 50%) { background-color: black; }.mixin (@a) when (lightness(@a) < 50%) { background-color: white; }.mixin (@a) { color: @a; }.class1 { .mixin(#ddd) }.class2 { .mixin(#555) }// Output.class1 { background-color: black; color: #dddddd; }.class2 { background-color: white; color: #555555; } 50. http://www.flickr.com/photos/mandolux/11290919/scope in less 51. /* Notes: ------------------------------As you can see, LESS keeps block scope inside curly braces.Note: Not to be confused with the scoped style attribute introduced inHTML5.*/scope@my-text-color: black;section {@my-text-color: gold;header {color: @var; // gold}}footer {color: @my-text-color; // black} 52. http://www.flickr.com/photos/newmediadaysdk/5178421986/namespaces 53. /* Notes: ------------------------------Namespaces allow for code organization and or encapsulation. You haveaccess to the @arguments variable as with mixins.*/namespaces#lib {.clear(@direction) {zoom: 1;&:after { content: 00a0; clear: @direction; display: block;}}}#wrapper {#lib > .clear(both); // inserts our clear rules from the lib namespace} 54. /* Notes: ------------------------------Write helpful comments to help you find scoped mixins when debugging.*/comments// Single line comments are not shown in the compiled output/* Block level comments will be kept in the output */ 55. THANKS 56. CREDITSPluginshttp://lesscss.org/http://drupal.org/project/lesshttps://npmjs.org/package/lesshttp://rubygems.org/gems/lesshttp://www.asual.com/lesscss/http://wordpress.org/extend/plugins/wp-less/Toolshttp://winless.org/http://crunchapp.net/http://panic.com/coda/http://wearekiss.com/simplesshttp://incident57.com/codekit/https://github.com/danro/LESS-sublimehttps://github.com/berfarah/LESS-build-sublime/https://github.com/appden/less.tmbundlehttp://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.htmlhttp://csslint.net/Projectshttp://markdotto.com/bootstrap/http://less-griddy.webatu.com/http://lesselements.com/Other CSS Preprocessorshttp://code.google.com/p/closure-stylesheets/http://sass-lang.com/http://learnboost.github.com/stylus/