Do more with {less}
This session
Goal #1:Show you why you shoulduse {less}
Goal #2:Teach you {less} in30 minutes
There will be code
{less} to keep us sane
You don’t need notes
About meJesper Wøldiche RahkonenDesigner / themer / markup marine*really* likes gridstwitter: woeldiche
OverviewWhat           What is {less}WhyFeaturesLearn {less}DrupalExtras
OverviewWhat           What is {less}WhyFeaturesLearn {less}DrupalExtras
OverviewWhatWhy            Why you should be using {less}FeaturesLearn {less}DrupalExtras
OverviewWhatWhyFeatures       An overview of the features in {less}Learn {less}DrupalExtras
OverviewWhatWhyFeaturesLearn {less}   I’ll teach you {less}, hopefullyDrupalExtras
OverviewWhatWhyFeaturesLearn {less}Drupal         Using {less} in drupalExtras
OverviewWhatWhyFeaturesLearn {less}DrupalExtras         Yummy extras, if time
What is {less}?
{less} extends css with newfeatures
Compiles into ordinary(but yummy, yummy) CSS
A strict superset of CSS
Why use {less}?
Why?Write less code
Why?Write less code,that’s faster to code up
Why?Write less code,that’s faster to code up,easier (cheaper) to maintain
Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a project
Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a projector among several projects
And it’s dead-easyto learn, if you alreadyknow CSS- honestly!
Feature overview
Feature overviewVariables (yay!)
Feature overviewVariablesMixins (it’ll make sense, promise)
Feature overviewVariablesMixinsNested rules (for prettier code)
Feature overviewVariablesMixinsNested rulesOperations (it’s almost like programming)
Feature overviewVariablesMixinsNested rulesOperationsColor functions (Want channels with your HSL?)
Feature overviewVariablesMixinsNested rulesOperationsColor functions+ more
Variables
Variables1    // LESS            12   /* Compiled CSS */2    @color: #4D926F;   13   #header {3                       14  ...
Mixins
Mixins// LESS1    .bordered {2      border-top: dotted 1px black;3      border-bottom: solid 2px black;4    }56    #menu a...
Mixins/* Compiled CSS */1    .bordered {2      border-top: dotted 1px black;3      border-bottom: solid 2px black;4    }56...
MixinsAny css class, id og element definition can bemixed in
Case: reusable stylesDefine once. Use multiple time1    .awesome-styling { <awesome css go here> }23    .funky-box {4     ...
Case: hard to rememberhacks workarounds1   .obscure-msie-hack {2     <illogical, esoteric code>3   }45   .content-that-wor...
meh...
meh...
Parametric mixinsNow we’re talking.They should be spelled paramëtric mixinsand have a theme song.
Paramëtric mixins// LESS1    .rounded-corners (@radius: 5px) {2      -webkit-border-radius: @radius;3      -moz-border-rad...
Paramëtric mixins/* Compiled CSS */1    #header {2      border-radius: 5px;3      -webkit-border-radius: 5px;4      -moz-b...
Case: Vendor prefixesDefine once1   .opacity(@opacity: 0.5) {2     -moz-opacity: @opacity;3     -khtml-opacity: @opacity;4...
Case: Vendor prefixesDefine once1   .opacity(@opacity: 0.5) {2     -moz-opacity: @opacity;3     -khtml-opacity: @opacity;4...
Case: Variable griddesignshack.co.uk/articles/css/introducing-the-less-css-grid
Case: Style library
@import// Import .less1   @import “lib.less”;2   @import “lib2”;// Import without processing3   @import “lib.css”;
A style library// LESS1    // Import libraries            16   form {2    @import “lib-typography”;      17     .lib_form-...
A style library/* Compiled CSS */1    <content of reset.css>         14 input[type=text],2    <content of typography.css> ...
Operations
Any number, colour or valuecan be operated on
Operations// LESS1   @base: 5%;2   @filler: @base * 2;3   @other: @base + @filler;45   color: #888 / 4;6   background-colo...
{less} tells colours from units// LESS1   @var: 1px + 5;23   // You can use brackets4   width: (@var + 5) * 2;56   // Requ...
Case: Derived styling// LESS1    @fontsize-default: 14px;2    @fontsize-sec: @fontsize-default * 0.8;3    @lineheight: 1.3...
Colour operations
Colour operations1    lighten(@color, 10%);      // a color 10% *lighter*2    darken(@color, 10%);       // a color 10% *d...
Huh?Colors are first converted to theHSL color-spaceAnd then manipulated at the channel level
Nested rules
Nesting/* Old skool CSS */1    #header { color: black; }2    #header .navigation {3      font-size: 12px;4    }5    #heade...
Nesting// LESS1    #header {2      color: black;34        .navigation {5          font-size: 12px;6        }7        .logo...
&-operator// LESS1    #header {2      color: black;34        .navigation {5          font-size: 12px;6        }7        .l...
{less} and Drupal™
Three ways to play itThe easy way inThe performance concious solutionThe advanced version
The easy way in
LESS moduleAutomatically compiles .less files in the theme toplain css
LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment mode
LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment modemylesstheme.info:1   ;----- Styleshe...
Performance concious?
Compile locallyFrom the command line$ lessc styles.less > styles.cssCompiles to stdout
less.app‘The only thing easier is making fun of InternetExplorer’
I’m {more} advanced
Compile clientside withless.js
Access JS enviroment1   @height: `document.body.clientHeight`;
Progressive enhancementBuild on top of css/less compiled serverside,right?
Yummy extras
Escaping strings// LESS1   .class {2     filter: ~”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’)”;3 ...
Namespaces1    #bundle {2      .button () {3        display: block;4        border: 1px solid black;5        background-co...
Namespaces1    #bundle {2      .button () {3        display: block;4        border: 1px solid black;5        background-co...
String interpolationEmbed variables in strings withthe @{param} construct1   @base-url: “http://assets.fnord.com”;2   back...
JS Evaluation1   @var: `”hello”.toUpperCase() + ‘!’`;Becomes2   @var: “HELLO!”;
Questions?
Thank you!
Slides & docs{less} documentation: lesscss.orgSlides: slideshare.net/woeldicheLess module: drupal.org/project/lessless.app...
Upcoming SlideShare
Loading in...5
×

Do more with {less}

3,713

Published on

Subject: An overview of {less} and a crash course in usage, presented at the Drupal Design Camp Berlin 2011.

Note: Licensed All Rights Reserved due to the images taken by others. All text is CC Attribution Share-alike.

Published in: Technology, Education
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,713
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
132
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Do more with {less}

  1. 1. Do more with {less}
  2. 2. This session
  3. 3. Goal #1:Show you why you shoulduse {less}
  4. 4. Goal #2:Teach you {less} in30 minutes
  5. 5. There will be code
  6. 6. {less} to keep us sane
  7. 7. You don’t need notes
  8. 8. About meJesper Wøldiche RahkonenDesigner / themer / markup marine*really* likes gridstwitter: woeldiche
  9. 9. OverviewWhat What is {less}WhyFeaturesLearn {less}DrupalExtras
  10. 10. OverviewWhat What is {less}WhyFeaturesLearn {less}DrupalExtras
  11. 11. OverviewWhatWhy Why you should be using {less}FeaturesLearn {less}DrupalExtras
  12. 12. OverviewWhatWhyFeatures An overview of the features in {less}Learn {less}DrupalExtras
  13. 13. OverviewWhatWhyFeaturesLearn {less} I’ll teach you {less}, hopefullyDrupalExtras
  14. 14. OverviewWhatWhyFeaturesLearn {less}Drupal Using {less} in drupalExtras
  15. 15. OverviewWhatWhyFeaturesLearn {less}DrupalExtras Yummy extras, if time
  16. 16. What is {less}?
  17. 17. {less} extends css with newfeatures
  18. 18. Compiles into ordinary(but yummy, yummy) CSS
  19. 19. A strict superset of CSS
  20. 20. Why use {less}?
  21. 21. Why?Write less code
  22. 22. Why?Write less code,that’s faster to code up
  23. 23. Why?Write less code,that’s faster to code up,easier (cheaper) to maintain
  24. 24. Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a project
  25. 25. Why?Write less code,that’s faster to code up,easier (cheaper) to maintainand re-use in a projector among several projects
  26. 26. And it’s dead-easyto learn, if you alreadyknow CSS- honestly!
  27. 27. Feature overview
  28. 28. Feature overviewVariables (yay!)
  29. 29. Feature overviewVariablesMixins (it’ll make sense, promise)
  30. 30. Feature overviewVariablesMixinsNested rules (for prettier code)
  31. 31. Feature overviewVariablesMixinsNested rulesOperations (it’s almost like programming)
  32. 32. Feature overviewVariablesMixinsNested rulesOperationsColor functions (Want channels with your HSL?)
  33. 33. Feature overviewVariablesMixinsNested rulesOperationsColor functions+ more
  34. 34. Variables
  35. 35. Variables1 // LESS 12 /* Compiled CSS */2 @color: #4D926F; 13 #header {3 14 color: #4D926F;4 #header { 15 }5 color: @color; 166 } 17 h2 {7 18 color: #4D926F;8 h2 { 19 }9 color: @color;10 }11
  36. 36. Mixins
  37. 37. Mixins// LESS1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }56 #menu a {7 color: #111;8 .bordered;9 }10 .post a {11 color: red;12 .bordered;13 }
  38. 38. Mixins/* Compiled CSS */1 .bordered {2 border-top: dotted 1px black;3 border-bottom: solid 2px black;4 }56 #menu a {7 color: #111;8 border-top: dotted 1px black;9 border-bottom: solid 2px black;10 }11 .post a {12 color: red;13 border-top: dotted 1px black;14 border-bottom: solid 2px black;15 }
  39. 39. MixinsAny css class, id og element definition can bemixed in
  40. 40. Case: reusable stylesDefine once. Use multiple time1 .awesome-styling { <awesome css go here> }23 .funky-box {4 .awesome-styling5 }67 .even funkier box {8 .awesome-styling9 <additional superfunky styling>10 }
  41. 41. Case: hard to rememberhacks workarounds1 .obscure-msie-hack {2 <illogical, esoteric code>3 }45 .content-that-works-in-any-other-browser {6 <styling>7 .obscure-msie-hack8 }
  42. 42. meh...
  43. 43. meh...
  44. 44. Parametric mixinsNow we’re talking.They should be spelled paramëtric mixinsand have a theme song.
  45. 45. Paramëtric mixins// LESS1 .rounded-corners (@radius: 5px) {2 -webkit-border-radius: @radius;3 -moz-border-radius: @radius;4 border-radius: @radius;5 }67 #header {8 .rounded-corners;9 }10 #footer {11 .rounded-corners(10px);12 }
  46. 46. Paramëtric mixins/* Compiled CSS */1 #header {2 border-radius: 5px;3 -webkit-border-radius: 5px;4 -moz-border-radius: 5px;5 }67 #footer {8 border-radius: 10px;9 -webkit-border-radius: 10px;10 -moz-border-radius: 10px;11 }
  47. 47. Case: Vendor prefixesDefine once1 .opacity(@opacity: 0.5) {2 -moz-opacity: @opacity;3 -khtml-opacity: @opacity;4 -webkit-opacity: @opacity;5 opacity: @opacity;6 -ms-filter: e(“progid:DXImageTransform.Microsoft.Alpha(Opacity=”)@opacity*100e(“)”);7 filter: e(“alpha(opacity =”)@opacity * 100e(“)”);8 }Use thrice9 body { .opacity(0.8) }10 .fancy-box { .opacity(0.4) }11 .see-through-footer { .opacity }
  48. 48. Case: Vendor prefixesDefine once1 .opacity(@opacity: 0.5) {2 -moz-opacity: @opacity;3 -khtml-opacity: @opacity;4 -webkit-opacity: @opacity;5 opacity: @opacity;6 -ms-filter: e(“progid:DXImageTransform.Microsoft.Alpha(Opacity=”)@opacity*100e(“)”);7 filter: e(“alpha(opacity =”)@opacity * 100e(“)”);8 }Use thrice9 body { .opacity(0.8) }10 .fancy-box { .opacity(0.4) }11 .see-through-footer { .opacity }
  49. 49. Case: Variable griddesignshack.co.uk/articles/css/introducing-the-less-css-grid
  50. 50. Case: Style library
  51. 51. @import// Import .less1 @import “lib.less”;2 @import “lib2”;// Import without processing3 @import “lib.css”;
  52. 52. A style library// LESS1 // Import libraries 16 form {2 @import “lib-typography”; 17 .lib_form-base3 @import “lib-branding.less”; 18 .lib_form-modern4 @import “lib-form_ui.less”; 19 ... your custom styles5 @import “lib-buttons.less”; 20 }6 217 /* Import base styling */ 22 input[type=text],8 @import “reset.css”; 23 textarea {9 @import “typography.css”; 24 .lib_form-input-modern10 25 ... more custom styles11 /* Apply library styles */ 26 }12 body {13 .lib_ty-base14 .lib_brand-base15 }
  53. 53. A style library/* Compiled CSS */1 <content of reset.css> 14 input[type=text],2 <content of typography.css> 15 textarea {3 16 <styles of lib_form-input-4 /* Apply library styles */ modern>5 body { 17 ... more custom styling6 <styles of lib_ty-base> 18 }7 <styles of lib_brand-base>8 }9 form {10 <styles of lib_form-base>11 <styles of lib_form-modrn>12 ... your custom styles13 }
  54. 54. Operations
  55. 55. Any number, colour or valuecan be operated on
  56. 56. Operations// LESS1 @base: 5%;2 @filler: @base * 2;3 @other: @base + @filler;45 color: #888 / 4;6 background-color: @base-color + #111;7 height: 100% / 2 + @filler;
  57. 57. {less} tells colours from units// LESS1 @var: 1px + 5;23 // You can use brackets4 width: (@var + 5) * 2;56 // Required for compound values7 border: (@width / 11) solid black;/* Compiled CSS */8 width: 22px;9 border: 2px solid black;
  58. 58. Case: Derived styling// LESS1 @fontsize-default: 14px;2 @fontsize-sec: @fontsize-default * 0.8;3 @lineheight: 1.3;45 p {6 font-size: @fontsize-default;7 line-height: @lineheight * @fontsize-default;8 }910 .block p {11 font-size: @fontsize-sec;12 line-height: @lineheight * @fontsize-sec;13 }
  59. 59. Colour operations
  60. 60. Colour operations1 lighten(@color, 10%); // a color 10% *lighter*2 darken(@color, 10%); // a color 10% *darker*34 saturate(@color, 10%); // a color 10% *more* saturated5 desaturate(@color, 10%); // a color 10% *less* saturated67 fadein(@color, 10%); // a color 10% *less* transparent8 fadeout(@color, 10%); // a color 10% *more* transparent910 spin(@color, -10%); // return a color with a 10 degree larger in hue than @color11 spin(@color, 10%); // return a color with a 10 degree smaller hue than @color
  61. 61. Huh?Colors are first converted to theHSL color-spaceAnd then manipulated at the channel level
  62. 62. Nested rules
  63. 63. Nesting/* Old skool CSS */1 #header { color: black; }2 #header .navigation {3 font-size: 12px;4 }5 #header .logo {6 width: 300px;7 }8 #header .logo:hover {9 text-decoration: none;10 }
  64. 64. Nesting// LESS1 #header {2 color: black;34 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }
  65. 65. &-operator// LESS1 #header {2 color: black;34 .navigation {5 font-size: 12px;6 }7 .logo {8 width: 300px;9 &:hover { text-decoration: none }10 }11 }
  66. 66. {less} and Drupal™
  67. 67. Three ways to play itThe easy way inThe performance concious solutionThe advanced version
  68. 68. The easy way in
  69. 69. LESS moduleAutomatically compiles .less files in the theme toplain css
  70. 70. LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment mode
  71. 71. LESS moduleAutomatically compiles .less files in the theme toplain cssDevelopment modemylesstheme.info:1 ;----- Stylesheets ----------------------------2 stylesheets[screen][] = styles/mylesstheme.styles.less3 stylesheets[screen][] = styles/mylesstheme.typography.less45 ;----- IE specific stylesheets ---------------6 ie stylesheets[if IE 7][all][] = styles/mylesstheme.ie7.less
  72. 72. Performance concious?
  73. 73. Compile locallyFrom the command line$ lessc styles.less > styles.cssCompiles to stdout
  74. 74. less.app‘The only thing easier is making fun of InternetExplorer’
  75. 75. I’m {more} advanced
  76. 76. Compile clientside withless.js
  77. 77. Access JS enviroment1 @height: `document.body.clientHeight`;
  78. 78. Progressive enhancementBuild on top of css/less compiled serverside,right?
  79. 79. Yummy extras
  80. 80. Escaping strings// LESS1 .class {2 filter: ~”progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’)”;3 }/* Compiled CSS */4 .class {5 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’);6 }
  81. 81. Namespaces1 #bundle {2 .button () {3 display: block;4 border: 1px solid black;5 background-color: grey;6 &:hover { background-color: white }7 }8 .tab { ... }9 .citation { ... }10 }1112 #header a {13 color: orange;14 #bundle > .button;15 }
  82. 82. Namespaces1 #bundle {2 .button () {3 display: block;4 border: 1px solid black;5 background-color: grey;6 &:hover { background-color: white }7 }8 .tab { ... }9 .citation { ... }10 }1112 #header a {13 color: orange;14 #bundle > .button;15 }
  83. 83. String interpolationEmbed variables in strings withthe @{param} construct1 @base-url: “http://assets.fnord.com”;2 background-image: url(“@{base-url}/images/bg.png”);
  84. 84. JS Evaluation1 @var: `”hello”.toUpperCase() + ‘!’`;Becomes2 @var: “HELLO!”;
  85. 85. Questions?
  86. 86. Thank you!
  87. 87. Slides & docs{less} documentation: lesscss.orgSlides: slideshare.net/woeldicheLess module: drupal.org/project/lessless.app: incident57.com/less/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×