LESS, the CSS Preprocessor
6 likes3,334 views
LESS is a dynamic stylesheet language. It extends CSS with dynamic behavior such as variables, mixins, operations and functions. Imagine being able to define a color one time and then use it in multiple places. To be able to say, "Take that background color and have it darken by 20% when I hover over it." Imagine being able to use rounded corners without needing to remember and write the styles for all the different browsers, to be able to create gradients in CSS by just telling it the colors you want to use. This session will introduce you to LESS, show you how to use it, and walk you through how to set up the software to use it. Since this is an extension of CSS, you should know some CSS. The examples will be taken from Bootstrap and Joomla JUI so having basic knowledge of that is helpful.
More Related Content
What's hot (20)
Similar to LESS, the CSS Preprocessor (20)
More from Andrea Tarr (6)
Recently uploaded (20)
LESS, the CSS Preprocessor
- 1. LESS, The CSS Preprocessor Andrea Tarr MetaScale /Sears Holdings Joomla Day New England 2013
- 2. What is LESS Using LESS LESS in Joomla April 13, 2013 JDNE: LESS, The CSS Preprocessor 2
- 3. Dynamic CSS Easy Customization Reuse Power of Variables April 13, 2013 JDNE: LESS, The CSS Preprocessor 3
- 4. Dynamic CSS Super set of CSS .LESS April 13, 2013 JDNE: LESS, The CSS Preprocessor 4
- 5. Preprocessing Client Side http://lesscss.org April 13, 2013 JDNE: LESS, The CSS Preprocessor 5
- 6. <link rel="stylesheet/ less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></ script> April 13, 2013 JDNE: LESS, The CSS Preprocessor 6
- 7. Preprocessing Server Side http://leafo.net/lessphp http://nodejs.org April 13, 2013 JDNE: LESS, The CSS Preprocessor 7
- 8. 1. Install node.js http://nodejs.org 2. Install LESS sudo npm install -g less 3. Process CSS files lessc ../less/template.less > template.css April 13, 2013 JDNE: LESS, The CSS Preprocessor 8
- 9. Why LESS not SASS? Faster JavaScript CSS Syntax April 13, 2013 JDNE: LESS, The CSS Preprocessor 9
- 10. @ Variables Define once, use often April 13, 2013 JDNE: LESS, The CSS Preprocessor 10
- 11. @text-color: #2c2c2c; p{ color: @text-color; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 11
- 12. h2 { color: @text-color; border: 1px solid @text-color; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 12
- 13. Mixins Shorthand classes April 13, 2013 . JDNE: LESS, The CSS Preprocessor 13
- 14. .rounded { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 14
- 15. .sideboxa { .rounded; } .sideboxb { padding: 5px; .rounded; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 15
- 16. () Mixins Parameters April 13, 2013 JDNE: LESS, The CSS Preprocessor 16
- 17. .rounded (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 17
- 18. .sideboxa { .rounded; } .sideboxb { padding: 5px; .rounded(3px); } April 13, 2013 JDNE: LESS, The CSS Preprocessor 18
- 19. Operations + Math! - * / () April 13, 2013 JDNE: LESS, The CSS Preprocessor 19
- 20. @base-margin: 15px; @base: 5%; @filler: (@base * 2); .box1 { margin-bottom: (@base- margin + 20px); height: (100% / 2 + @filler); } April 13, 2013 JDNE: LESS, The CSS Preprocessor 20
- 21. @link-color: #3f43ca; a{ color: @link-color; } a:hover { color: (@link-color + #222); } April 13, 2013 JDNE: LESS, The CSS Preprocessor 21
- 22. () Functions Built-in April 13, 2013 JDNE: LESS, The CSS Preprocessor 22
- 23. @link-color: #3f43ca; a{ color: @link-color; } a:hover { color: lighten(@link- color, 10%; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 23
- 24. lighten(@color, 10%); darken(@color, 10%); saturate(@color, 10%); desaturate(@color, 10%); fadein(@color, 10%); spin(@color, 10); April 13, 2013 JDNE: LESS, The CSS Preprocessor 24
- 25. /* Comments CSS Style Included */ April 13, 2013 JDNE: LESS, The CSS Preprocessor 25
- 26. /* Header styles for blog pages */ April 13, 2013 JDNE: LESS, The CSS Preprocessor 26
- 27. // Comments Single line Not included April 13, 2013 JDNE: LESS, The CSS Preprocessor 27
- 28. // Override from template April 13, 2013 JDNE: LESS, The CSS Preprocessor 28
- 29. @ @import CSS files LESS files April 13, 2013 JDNE: LESS, The CSS Preprocessor 29
- 30. @import "variables.less"; @import "mixins.less"; @import "layout.less"; @import "grid.less"; Compiles to single file April 13, 2013 JDNE: LESS, The CSS Preprocessor 30
- 31. Nesting { .{} &{ } } April 13, 2013 JDNE: LESS, The CSS Preprocessor 31
- 32. #header { color: #2c2c2c; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: underline; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 32
- 33. #header { color: #2c2c2c; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: underline; } } } April 13, 2013 JDNE: LESS, The CSS Preprocessor 33
- 34. Debug Issues Firebug gives CSS line Search LESS files for multiple selectors Doesn't work when nested April 13, 2013 JDNE: LESS, The CSS Preprocessor 34
- 35. LESS in Joomla April 13, 2013 JDNE: LESS, The CSS Preprocessor 35
- 36. You don't need LESS for Joomla templates April 13, 2013 JDNE: LESS, The CSS Preprocessor 36
- 37. Joomla Bootstrap files are already compiled Some Bootstrap template vendors don't distribute LESS files April 13, 2013 JDNE: LESS, The CSS Preprocessor 37
- 38. You don't need LESS in Joomla ... but it's very helpful! April 13, 2013 JDNE: LESS, The CSS Preprocessor 38
- 39. Joomla JUI files media jui css fonts img js less April 13, 2013 JDNE: LESS, The CSS Preprocessor 39
- 40. media/jui/less accordion.less alerts.less bootstrap-extended.less bootstrap-rtl.less bootstrap.less breadcrumbs.less button-groups.less buttons.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 40
- 41. carousel.less close.less code.less component- animations.less dropdowns.less forms.less grid.less hero-unit.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 41
- 42. icomoon.less labels-badges.less layouts.less mixins.less modals.less navbar.less navs.less pager.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 42
- 43. pagination.less popovers.less progress-bars.less reset.less responsive-1200px- min.less responsive-767px- max.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 43
- 44. responsive-768px-979p x.less responsive-navbar.less responsive-utilities.less responsive.less scaffolding.less sprites.less tables.less thumbnails.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 44
- 45. tooltip.less type.less utilities.less variables.less wells.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 45
- 46. JUI Extensions bootstrap-extended.less April 13, 2013 JDNE: LESS, The CSS Preprocessor 46
- 47. Bootstrap.less contains @imports of other less files. Replace bootstrap.less with template.less in your template. April 13, 2013 JDNE: LESS, The CSS Preprocessor 47
- 48. mytemplate css template.css html images less template.less variables.less index.php April 13, 2013 JDNE: LESS, The CSS Preprocessor 48
- 49. variables.less Sets up variables for your template Copy file from media/jui/ less and change it in your template April 13, 2013 JDNE: LESS, The CSS Preprocessor 49
- 50. variables.less @bodyBackground: #ffffff; @textColor: #2c2c2c; @linkColor: #08c08d; @linkColorHover: darken(@linkColor, 15%); @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans- serif; April 13, 2013 JDNE: LESS, The CSS Preprocessor 50
- 51. template.less @import less files from media/jui/less @import any less files in your template Add styles for your template using less April 13, 2013 JDNE: LESS, The CSS Preprocessor 51
- 52. Remember, straight CSS is valid LESS. Add in LESS where it is helpful. Ignore it where it would be confusing. April 13, 2013 JDNE: LESS, The CSS Preprocessor 52
- 53. template.less @import "../../../media/jui/ less/reset.less"; @import "variables.less"; @import "../../../media/jui/ less/mixins.less"; @import "../../../media/jui/ less/scaffolding.less"; etc... April 13, 2013 JDNE: LESS, The CSS Preprocessor 53
- 54. template.less (con't) @import "../../../media/jui/ less/bootstrap- extended.less"; Has to be after the other Bootstrap @imports to override when necessary April 13, 2013 JDNE: LESS, The CSS Preprocessor 54
- 55. template.less (con't) After the imports, add your styles .img_caption .right { float: right; margin-left: 1em; } April 13, 2013 JDNE: LESS, The CSS Preprocessor 55
- 56. Compile template.less lessc ../less/template.less > template.css Call the template.css file in your index.php file as usual. April 13, 2013 JDNE: LESS, The CSS Preprocessor 56
- 57. Questions? April 13, 2013 JDNE: LESS, The CSS Preprocessor 57