Doing More With Less


Published on

This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide

Doing More With Less

  1. 1. Doing More With How a meta-language can help youtake control of your stylesheets andhelp improve your style productivity.
  2. 2. David Engel• UofM grad• .NET and PHP developer• Tipping Canoe alumnus• Experienced “backend” developer PHP, C#, C++, MySQL, TransactSQL, Sphinx• Relatively new to “frontend” development CSS, jQuery, LESS, UX, design
  3. 3. CSS Cascading Style Sheets• describes look & formatting of a document that has been created using markup• separate style and content• avoid specificity by harnessing the cascade
  4. 4. OOCSS Object Oriented CSS• separate structure and skin• separate container and content
  5. 5. OOCSS#button { #box { width: 100px; width: 200px; height: 25px; height: 400px; background: #ccc; background: #ccc; border: 1px solid #333; border: 1px solid #333; border-radius: 5px; border-radius: 5px;} }<a id="button" href="">blah</a><div id="box">blah</div>
  6. 6. OOCSSbecomes….button { .skin { width: 100px; background: #ccc; height: 25px; border: 1px solid #333;} border-radius: 5px;.box { } width: 200px; height: 400px;}<a class="button skin" href="">blah</a><div class="box skin">blah</div>
  7. 7. OOCSSUse classes for styling hooks!Use ids for behavioral hooks!
  8. 8. DRY CSS Don’t Repeat Yourself (Jeremy Clarke)1. Group reusable CSS properties together2. Use logical names for groups3. Add selectors (not a fan of ALL-CAPS)#WHITE-BACKGROUND,.large-white-background,.medium-white-background{ background-color: #fff; border-color: #bbb;}
  9. 9. DRY CSS What are we still missing?• Descendent selectors break OOCSS – so what? (the “OO” part of OOCSS is garbage anyways)• No variables• No mixins• No inheritance
  10. 10. LESS• variables • comparitors• mixins • type/unit checking• nesting • color functions• operations • math functions• functions • string embedding• switches • Namespaces• overloads • Javascripting!!!
  11. 11. LESS: Variables@maxim-green:#8dc63f;.color-green{ color:@maxim-green;}
  12. 12. LESS: Mixins• Gives us inheritance!.rounded-corners{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}#header { .rounded-corners;}
  13. 13. LESS: MixinsParametric mixins extend this functionality.rounded-corners (@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners(5px);}
  14. 14. LESS: MixinsParametric mixins can also have default values.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners;}
  15. 15. LESS: Nesting Nesting gives us a kind of namespacing for specificity of inheritance#header { h1 { font-size: 26px; font-weight: bold; } p{ font-size: 12px; a{ text-decoration: none; &:hover { border-width: 1px } } }}
  16. 16. LESS: Nesting… and Scope@red : red;#header { @red: #BF2E1A; h1 {color: @red; // yields #BF2E1A }}h1 {color: @red; // yields red}
  17. 17. LESS: Operations• add, subtract, divide and multiply properties@red: # BF2E1A;@main-margin: 4px;#footer{ color: @red + #001100; margin-left: @main-margin * 3;}
  18. 18. LESS: FunctionsTake arguments into your mixins….box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @x @y @blur @color; -moz-box-shadow: @x @y @blur @color; -webkit-box-shadow: @x @y @blur @color;}.box-shadow(3px, 7px);
  19. 19. LESS: Functions…or use the @arguments variable to take it all!.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments;}.box-shadow(3px, 7px);
  20. 20. LESS: Imperative ProgrammingThis is a kind of switch (note the “all” selector)….color-mixin (dark, @color) { color: darken(@color, 10%);}.color-mixin (light, @color) { color: lighten(@color, 10%);}.color-mixin (@_, @color) { display: block;}
  21. 21. LESS: Imperative Programming…that we can call like so:@light-switch: light;@dark-switch: dark;.light-class { .color-mixin(@light-switch, #888);}.dark-class { .color-mixin(@dark-switch, #888);}
  22. 22. LESS: Overloads“Arity” for the geeks (and Java and .NET folks).fade-mixin (@a-color) { color: @a-color;}.fade-mixin (@a-color, @b-color) { color: fade(@a-color, @b-color);}#solid-color{ .fade-mixin(blue);}#faded-color{ .fade-mixin(blue, green);}
  23. 23. LESS: Guarded mixins• uses “when” and can use “and” “,” and “not”• can also use the keywords “true” and “false”.back-white{background-color:white;}.back-black{background-color:black;}.back-red{background-color:red;}.mixin (@a) when (@a > 10), (@a < -10){ .back-white;}.mixin (@a) when (@a = 10) and (@a = true){ .back-red;}.mixin (@a) when (@a < 11) and (@a > -11) and not(@a = 10){ .back-black;}
  24. 24. LESS: Guarded mixins• Comparitors can be very useful• Eg. Code reuse between media types@media: mobile;.mixin (@a) when (@media = mobile) { ... }.mixin (@a) when (@media = desktop) { ... }.mixin (@a) when (@media = print) { ... }
  25. 25. LESS: Type checking• iscolor • isstring • isurl• isnumber • iskeyword.color-mixin (@a) when (isnumber(@a)) { color: @a + #001100;}.color-mixin (@a) when (iscolor(@a)) { color: @a}h1{ .color-mixin(red);}h2{ .color-mixin(#842210);}
  26. 26. LESS: Unit checking• ispixel • ispercentage • isem.mixin (@a) when (ispixel(@a)) {}.mixin (@a) when (isem(@a)) {}.mixin (@a) when (ispercentage(@a)) {}
  27. 27. LESS: Colour Functionslighten(@color, 10%); // return a color which is 10% *lighter* than @colordarken(@color, 10%); // return a color which is 10% *darker* than @colorsaturate(@color, 10%); // return a color 10% *more* saturated than @colordesaturate(@color, 10%); // return a color 10% *less* saturated than @colorfadein(@color, 10%); // return a color 10% *less* transparent than @colorfadeout(@color, 10%); // return a color 10% *more* transparent than @colorfade(@color, 50%); // return @color with 50% transparencyspin(@color, 10); // return a color with a 10 degree larger in hue than @colorspin(@color, -10); // return a color with a 10 degree smaller hue than @colormix(@color1, @color2); // return a mix of @color1 and @color2
  28. 28. LESS: Math Functions ceil floor round percentage
  29. 29. LESS: Extract Colour Propertieshue(@color);saturation(@color);lightness(@color);alpha(@color);eg.@old-color:#27BA19;@new-color: hsl(hue(@old-color), 45%, 90%);
  30. 30. LESS: Embedding Strings• For those of you familiar with XSLT or Ruby• Use curly braces to embed the text• Use tilde ~ to escape strings that require quotes @base-url: ""; @green-color: #8dc63f; #header{ background: @ green-color url("@{base-url}images/img.png"); } #footer{ filter: ~"alpha(opacity = (@{opacityPercentage}))"; }
  31. 31. LESS: Javascripting!!!• Use backticks to embed your JS in the CSS• Escape strings, embed, interpolate, etc.• I haven’t played with this feature yet, but here’s an untested example: @var1: `"LESS ".toLowerCase()`; @var2: `"ooooooh".toUpperCase() + !`; @var3: ~`"@{var1: }" + "@{var2: }" + !`;
  32. 32. LESS Elements• .gradient • .rotation• .bw-gradient • .scale• .bordered • .transition• .drop-shadow • .inner-shadow• .rounded • .box-shadow• .border-radius • .columns• .opacity • .translate• .transition-duration
  33. 33. LESS: PrecompilersLESS needs to be pre-compiled into CSS using… • simpless • • lessphp • …others ORto compile on the fly while developing use…<link rel="stylesheet/less" type="text/css" href="styles.less"><script src=""></script>
  34. 34. LESS: SIMPLESS• SimpLESS compiles less into minified css• works with Twitter bootstrap• self-updates• compiles on the fly (monitored polling)• multi-platform• free• open source
  35. 35. LESS: SIMPLESSThis is what I do…1. I code my LESSS in a separate project2. I let SimpLESS monitor the local file to compile CSS on the fly3. I commit minified CSS to my main project4. I reference the minified CSS using with the SVN version tagged on in my html<link media="screen" href= type="text/css" rel="stylesheet“>
  36. 36. LESS: Eclipse pluginI personally use the Xtext plugin – here are some install instructions… can use the LESS compiler inEclipse, however I manage all my compilationexternally as I also use LESS with .NET andClassic ASP code (yes!)
  37. 37. Useful links LESS SimpLESS LessElements Winnipeg PHP Tipping Canoe David Engel (developed using LESS)