Published on

An overview of the CSS preprocessor LESS.

Including code samples for creating mixins, variables, math, colors, patterns, guards, scope, and namespaces.

Published in: Technology, Sports
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. .LESSan overview of the CSS preprocessor/* Joe Seifi @joeseifi */
  2. 2. “When I am working ona problem, I never thinkabout beauty, but whenI have finished, if thesolution is not beautiful,I know it is wrong.Buckminster Fullerhttp://www.flickr.com/photos/21680590@N06/4654423909/
  3. 3. http://www.flickr.com/photos/kejun/6988320204/authoring abstractions have matured...
  4. 4. why less?CSS is fine... I don’t wanna add more complexity to it?Do we have to learn a new programming language?
  5. 5. just a few reasonsCSS is fine... yes, but our needs have outgrown its features.Using CSS on a big project quickly becomes...
  6. 6. http://www.flickr.com/photos/stevendepolo/3340172798/complex,
  7. 7. http://www.flickr.com/photos/stevendepolo/3340172798/messy,
  8. 8. http://www.flickr.com/photos/nathalier/3349184641/& hard to manage.
  9. 9. http://www.flickr.com/photos/bohman/201715020/Existing code is tough to maintain or update,
  10. 10. http://www.flickr.com/photos/northbaywanderer/121971388/becomes unreadable,
  11. 11. http://www.flickr.com/photos/miran/4538440349/and is not reusable.
  12. 12. http://www.flickr.com/photos/via/42436087/less gives us new tricks, tools,
  13. 13. http://www.flickr.com/photos/jdhancock/3578775702/and it’s fun to use.
  14. 14. http://www.flickr.com/photos/shollingsworth/3069791717/getting started with less...
  15. 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 <(curl -fsSkL raw.github.com/mxcl/homebrew/go)install node $ brew install nodeinstall npm $ curl http://npmjs.org/install.sh | shinstall less $ npm -g install less
  16. 16. .less files/* Notes: ------------------------------To get started, all you have to do is change your .css fileextensions to .less files.One of the strengths of LESS over competing CSSpreprocessors, is that .less files are valid CSS files andvice versa. This makes learning the language easier, andreading LESS files a no brainer for new comers.*/
  17. 17. /* Notes: ------------------------------The compress option will remove all whitespace. The yui-compress optionwill also remove all line-breaks.*/using the less cli$ lessc [options] input.less [output.css file]options:-compress-yui-compress
  18. 18. http://www.imdb.com/media/rm2567540224/tt0097523honey, i shrunk the css@import "reset.css";.font-family{font-family:arial,sans-serif}.button{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))}.h1{font-size:1.75em;font-weight:700;text-shadow:0 0 5px #888}body{font-size:20px;background:#d3d3d3 url("/images/bg.png");color:#353535;padding:10%;font-family:arial,sans-serif}a{text-decoration:none;color:#00589c}header h1{font-size:24px;font-size:1.75em;font-weight:700;text-shadow:0 0 5px #888;padding:0 0 5% 5%}header #navigation ul li{display:inline-block}header#navigation ul li:first-child{border-left:5px solid #353535}header #navigation ul li>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. 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. 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. 21. http://www.flickr.com/photos/papalars/777342980/imports in less
  22. 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. 23. http://www.flickr.com/photos/75491103@N00/3565601486/nesting in less
  24. 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. 25. /* Notes: ------------------------------Keep in mind that in less, variables are actually constants, so they canonly be defined once.It’s 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. 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. 27. http://www.flickr.com/photos/75491103@N00/3565601486/using strings in less
  28. 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. 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. 30. http://www.flickr.com/photos/maisonbisson/201844037/math operations
  31. 31. /* Notes: ------------------------------Basic math operations (+ - * /) are supported in less. What’s 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. 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. 33. http://www.flickr.com/photos/rickchung/7832568498/mixins
  34. 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. 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. 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. 37. /* Notes: ------------------------------Our mixin takes 2 paramters. We’ve 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. 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. 39. http://www.flickr.com/photos/clydeorama/6327739969/arguments
  40. 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 you’ve 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. 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 youcan’t 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. 42. http://www.flickr.com/photos/passetti/5605375493/less makes color fun
  43. 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. 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 can’t 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. 45. http://www.flickr.com/photos/tomorrowstand/2280680315/patterns
  46. 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. 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. 48. http://www.seifi.orgguards
  49. 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. 50. http://www.flickr.com/photos/mandolux/11290919/scope in less
  51. 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. 52. http://www.flickr.com/photos/newmediadaysdk/5178421986/namespaces
  53. 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. 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. 55. THANKS
  56. 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/