LESS, The CSS  Preprocessor        Andrea Tarr  MetaScale /Sears HoldingsJoomla Day New England 2013
What is LESSUsing LESSLESS in JoomlaApril 13, 2013   JDNE: LESS, The CSS Preprocessor   2
Dynamic CSSEasy CustomizationReusePower of VariablesApril 13, 2013   JDNE: LESS, The CSS Preprocessor   3
Dynamic CSSSuper set of CSS.LESSApril 13, 2013   JDNE: LESS, The CSS Preprocessor   4
PreprocessingClient Sidehttp://lesscss.orgApril 13, 2013   JDNE: LESS, The CSS Preprocessor   5
<link rel="stylesheet/less" type="text/css"href="styles.less" /><script src="less.js"type="text/javascript"></script>April...
PreprocessingServer Sidehttp://leafo.net/lessphphttp://nodejs.orgApril 13, 2013   JDNE: LESS, The CSS Preprocessor   7
1.  Install node.jshttp://nodejs.org2. Install LESSsudo npm install -g less3. Process CSS fileslessc ../less/template.less...
Why LESS not SASS?FasterJavaScriptCSS SyntaxApril 13, 2013   JDNE: LESS, The CSS Preprocessor   9
@VariablesDefine once,use oftenApril 13, 2013   JDNE: LESS, The CSS Preprocessor   10
@text-color: #2c2c2c;p{  color: @text-color;}April 13, 2013   JDNE: LESS, The CSS Preprocessor   11
h2 {  color: @text-color;  border: 1px solid@text-color;}April 13, 2013   JDNE: LESS, The CSS Preprocessor   12
MixinsShorthand classesApril 13, 2013                                    .                 JDNE: LESS, The CSS Preprocesso...
.rounded {  -webkit-border-radius:5px;  -moz-border-radius: 5px;  -ms-border-radius: 5px;  -o-border-radius: 5px;  border-...
.sideboxa {  .rounded;}.sideboxb {  padding: 5px;  .rounded;}April 13, 2013   JDNE: LESS, The CSS Preprocessor   15
()MixinsParametersApril 13, 2013   JDNE: LESS, The CSS Preprocessor   16
.rounded (@radius: 5px) {  -webkit-border-radius:@radius;  -moz-border-radius: @radius;  -ms-border-radius: @radius;  -o-b...
.sideboxa {  .rounded;}.sideboxb {  padding: 5px;  .rounded(3px);}April 13, 2013   JDNE: LESS, The CSS Preprocessor   18
Operations                                          +Math!                                                    -           ...
@base-margin: 15px;@base: 5%;@filler: (@base * 2);.box1 {  margin-bottom: (@base-margin + 20px);  height: (100% / 2 + @fil...
@link-color: #3f43ca;a{  color: @link-color;}a:hover {  color: (@link-color +#222);}April 13, 2013   JDNE: LESS, The CSS P...
()FunctionsBuilt-inApril 13, 2013   JDNE: LESS, The CSS Preprocessor   22
@link-color: #3f43ca;a{  color: @link-color;}a:hover {  color: lighten(@link-color, 10%;}April 13, 2013   JDNE: LESS, The ...
lighten(@color, 10%);darken(@color, 10%);saturate(@color, 10%);desaturate(@color, 10%);fadein(@color, 10%);spin(@color, 10...
/*CommentsCSS StyleIncluded                                      */April 13, 2013   JDNE: LESS, The CSS Preprocessor   25
/* Header stylesfor blog pages */April 13, 2013   JDNE: LESS, The CSS Preprocessor   26
//CommentsSingle lineNot includedApril 13, 2013   JDNE: LESS, The CSS Preprocessor   27
// Override from templateApril 13, 2013   JDNE: LESS, The CSS Preprocessor   28
@@importCSS filesLESS filesApril 13, 2013   JDNE: LESS, The CSS Preprocessor   29
@import          "variables.less";@import          "mixins.less";@import          "layout.less";@import          "grid.les...
Nesting                                                {                                                    .{}           ...
#header { color: #2c2c2c; }#header .navigation { font-size: 12px; }#header .logo { width: 300px; }#header .logo:hover { te...
#header      {           color: #2c2c2c; .navigation {           font-size: 12px; } .logo       {           width: 300px; ...
Debug IssuesFirebug gives CSS lineSearch LESS files formultiple selectorsDoesnt work whennestedApril 13, 2013   JDNE: LESS...
LESS in JoomlaApril 13, 2013   JDNE: LESS, The CSS Preprocessor   35
You dontneed LESSfor JoomlatemplatesApril 13, 2013   JDNE: LESS, The CSS Preprocessor   36
Joomla Bootstrap filesare already compiledSome Bootstraptemplate vendors dontdistribute LESS filesApril 13, 2013   JDNE: L...
You dont need LESS inJoomla... but its very helpful!April 13, 2013   JDNE: LESS, The CSS Preprocessor   38
Joomla JUI filesmedia jui   css   fonts   img   js   lessApril 13, 2013   JDNE: LESS, The CSS Preprocessor   39
media/jui/lessaccordion.lessalerts.lessbootstrap-extended.lessbootstrap-rtl.lessbootstrap.lessbreadcrumbs.lessbutton-group...
carousel.lessclose.lesscode.lesscomponent-animations.lessdropdowns.lessforms.lessgrid.lesshero-unit.lessApril 13, 2013   J...
icomoon.lesslabels-badges.lesslayouts.lessmixins.lessmodals.lessnavbar.lessnavs.lesspager.lessApril 13, 2013   JDNE: LESS,...
pagination.lesspopovers.lessprogress-bars.lessreset.lessresponsive-1200px-min.lessresponsive-767px-max.lessApril 13, 2013 ...
responsive-768px-979px.lessresponsive-navbar.lessresponsive-utilities.lessresponsive.lessscaffolding.lesssprites.lesstable...
tooltip.lesstype.lessutilities.lessvariables.lesswells.lessApril 13, 2013   JDNE: LESS, The CSS Preprocessor   45
JUI Extensionsbootstrap-extended.lessApril 13, 2013   JDNE: LESS, The CSS Preprocessor   46
Bootstrap.lesscontains @imports ofother less files.Replace bootstrap.lesswith template.less inyour template.April 13, 2013...
mytemplate css   template.css html images less   template.less   variables.less index.phpApril 13, 2013   JDNE: LESS, The ...
variables.lessSets up variables foryour templateCopy file from media/jui/less and change it in yourtemplateApril 13, 2013 ...
variables.less@bodyBackground: #ffffff;@textColor: #2c2c2c;@linkColor: #08c08d;@linkColorHover:darken(@linkColor, 15%);@sa...
template.less@import less files frommedia/jui/less@import any less files inyour templateAdd styles for yourtemplate using ...
Remember,straight CSSis valid LESS.Add in LESS where it ishelpful. Ignore it whereit would be confusing.April 13, 2013   J...
template.less@import "../../../media/jui/less/reset.less";@import "variables.less";@import "../../../media/jui/less/mixins...
template.less (cont)@import "../../../media/jui/less/bootstrap-extended.less";Has to be after the otherBootstrap @imports ...
template.less (cont)After the imports, addyour styles.img_caption .right {  float: right;  margin-left: 1em;}April 13, 201...
Compile template.lesslessc ../less/template.less> template.cssCall the template.css filein your index.php file asusual.Apr...
Questions?April 13, 2013   JDNE: LESS, The CSS Preprocessor   57
Upcoming SlideShare
Loading in …5
×

LESS, the CSS Preprocessor

2,840 views

Published on

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.

Published in: Technology, Education

LESS, the CSS Preprocessor

  1. 1. LESS, The CSS Preprocessor Andrea Tarr MetaScale /Sears HoldingsJoomla Day New England 2013
  2. 2. What is LESSUsing LESSLESS in JoomlaApril 13, 2013 JDNE: LESS, The CSS Preprocessor 2
  3. 3. Dynamic CSSEasy CustomizationReusePower of VariablesApril 13, 2013 JDNE: LESS, The CSS Preprocessor 3
  4. 4. Dynamic CSSSuper set of CSS.LESSApril 13, 2013 JDNE: LESS, The CSS Preprocessor 4
  5. 5. PreprocessingClient Sidehttp://lesscss.orgApril 13, 2013 JDNE: LESS, The CSS Preprocessor 5
  6. 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. 7. PreprocessingServer Sidehttp://leafo.net/lessphphttp://nodejs.orgApril 13, 2013 JDNE: LESS, The CSS Preprocessor 7
  8. 8. 1.  Install node.jshttp://nodejs.org2. Install LESSsudo npm install -g less3. Process CSS fileslessc ../less/template.less> template.cssApril 13, 2013 JDNE: LESS, The CSS Preprocessor 8
  9. 9. Why LESS not SASS?FasterJavaScriptCSS SyntaxApril 13, 2013 JDNE: LESS, The CSS Preprocessor 9
  10. 10. @VariablesDefine once,use oftenApril 13, 2013 JDNE: LESS, The CSS Preprocessor 10
  11. 11. @text-color: #2c2c2c;p{ color: @text-color;}April 13, 2013 JDNE: LESS, The CSS Preprocessor 11
  12. 12. h2 { color: @text-color; border: 1px solid@text-color;}April 13, 2013 JDNE: LESS, The CSS Preprocessor 12
  13. 13. MixinsShorthand classesApril 13, 2013 . JDNE: LESS, The CSS Preprocessor 13
  14. 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. 15. .sideboxa { .rounded;}.sideboxb { padding: 5px; .rounded;}April 13, 2013 JDNE: LESS, The CSS Preprocessor 15
  16. 16. ()MixinsParametersApril 13, 2013 JDNE: LESS, The CSS Preprocessor 16
  17. 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. 18. .sideboxa { .rounded;}.sideboxb { padding: 5px; .rounded(3px);}April 13, 2013 JDNE: LESS, The CSS Preprocessor 18
  19. 19. Operations +Math! - * / ()April 13, 2013 JDNE: LESS, The CSS Preprocessor 19
  20. 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. 21. @link-color: #3f43ca;a{ color: @link-color;}a:hover { color: (@link-color +#222);}April 13, 2013 JDNE: LESS, The CSS Preprocessor 21
  22. 22. ()FunctionsBuilt-inApril 13, 2013 JDNE: LESS, The CSS Preprocessor 22
  23. 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. 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. 25. /*CommentsCSS StyleIncluded */April 13, 2013 JDNE: LESS, The CSS Preprocessor 25
  26. 26. /* Header stylesfor blog pages */April 13, 2013 JDNE: LESS, The CSS Preprocessor 26
  27. 27. //CommentsSingle lineNot includedApril 13, 2013 JDNE: LESS, The CSS Preprocessor 27
  28. 28. // Override from templateApril 13, 2013 JDNE: LESS, The CSS Preprocessor 28
  29. 29. @@importCSS filesLESS filesApril 13, 2013 JDNE: LESS, The CSS Preprocessor 29
  30. 30. @import "variables.less";@import "mixins.less";@import "layout.less";@import "grid.less";Compiles to single fileApril 13, 2013 JDNE: LESS, The CSS Preprocessor 30
  31. 31. Nesting { .{} &{ } }April 13, 2013 JDNE: LESS, The CSS Preprocessor 31
  32. 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. 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. 34. Debug IssuesFirebug gives CSS lineSearch LESS files formultiple selectorsDoesnt work whennestedApril 13, 2013 JDNE: LESS, The CSS Preprocessor 34
  35. 35. LESS in JoomlaApril 13, 2013 JDNE: LESS, The CSS Preprocessor 35
  36. 36. You dontneed LESSfor JoomlatemplatesApril 13, 2013 JDNE: LESS, The CSS Preprocessor 36
  37. 37. Joomla Bootstrap filesare already compiledSome Bootstraptemplate vendors dontdistribute LESS filesApril 13, 2013 JDNE: LESS, The CSS Preprocessor 37
  38. 38. You dont need LESS inJoomla... but its very helpful!April 13, 2013 JDNE: LESS, The CSS Preprocessor 38
  39. 39. Joomla JUI filesmedia jui css fonts img js lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 39
  40. 40. media/jui/lessaccordion.lessalerts.lessbootstrap-extended.lessbootstrap-rtl.lessbootstrap.lessbreadcrumbs.lessbutton-groups.lessbuttons.lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 40
  41. 41. carousel.lessclose.lesscode.lesscomponent-animations.lessdropdowns.lessforms.lessgrid.lesshero-unit.lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 41
  42. 42. icomoon.lesslabels-badges.lesslayouts.lessmixins.lessmodals.lessnavbar.lessnavs.lesspager.lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 42
  43. 43. pagination.lesspopovers.lessprogress-bars.lessreset.lessresponsive-1200px-min.lessresponsive-767px-max.lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 43
  44. 44. responsive-768px-979px.lessresponsive-navbar.lessresponsive-utilities.lessresponsive.lessscaffolding.lesssprites.lesstables.lessthumbnails.lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 44
  45. 45. tooltip.lesstype.lessutilities.lessvariables.lesswells.lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 45
  46. 46. JUI Extensionsbootstrap-extended.lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 46
  47. 47. Bootstrap.lesscontains @imports ofother less files.Replace bootstrap.lesswith template.less inyour template.April 13, 2013 JDNE: LESS, The CSS Preprocessor 47
  48. 48. mytemplate css template.css html images less template.less variables.less index.phpApril 13, 2013 JDNE: LESS, The CSS Preprocessor 48
  49. 49. variables.lessSets up variables foryour templateCopy file from media/jui/less and change it in yourtemplateApril 13, 2013 JDNE: LESS, The CSS Preprocessor 49
  50. 50. variables.less@bodyBackground: #ffffff;@textColor: #2c2c2c;@linkColor: #08c08d;@linkColorHover:darken(@linkColor, 15%);@sansFontFamily: "HelveticaNeue", Helvetica, Arial, sans-serif;April 13, 2013 JDNE: LESS, The CSS Preprocessor 50
  51. 51. template.less@import less files frommedia/jui/less@import any less files inyour templateAdd styles for yourtemplate using lessApril 13, 2013 JDNE: LESS, The CSS Preprocessor 51
  52. 52. Remember,straight CSSis valid LESS.Add in LESS where it ishelpful. Ignore it whereit would be confusing.April 13, 2013 JDNE: LESS, The CSS Preprocessor 52
  53. 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. 54. template.less (cont)@import "../../../media/jui/less/bootstrap-extended.less";Has to be after the otherBootstrap @imports tooverride when necessaryApril 13, 2013 JDNE: LESS, The CSS Preprocessor 54
  55. 55. template.less (cont)After the imports, addyour styles.img_caption .right { float: right; margin-left: 1em;}April 13, 2013 JDNE: LESS, The CSS Preprocessor 55
  56. 56. Compile template.lesslessc ../less/template.less> template.cssCall the template.css filein your index.php file asusual.April 13, 2013 JDNE: LESS, The CSS Preprocessor 56
  57. 57. Questions?April 13, 2013 JDNE: LESS, The CSS Preprocessor 57

×