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.

1. Do more with {less}

2. This session

3. Goal #1:
Show you why you should
use {less}

4. Goal #2:
Teach you {less} in
30 minutes

5. There will be code

6. {less} to keep us sane

7. You don’t need notes

8. About me
Jesper Wøldiche Rahkonen
Designer / themer / markup marine
*really* likes grids
twitter: woeldiche

9. Overview
What What is {less}
Why
Features
Learn {less}
Drupal
Extras

10. Overview
What What is {less}
Why
Features
Learn {less}
Drupal
Extras

11. Overview
What
Why Why you should be using {less}
Features
Learn {less}
Drupal
Extras

12. Overview
What
Why
Features An overview of the features in {less}
Learn {less}
Drupal
Extras

13. Overview
What
Why
Features
Learn {less} I’ll teach you {less}, hopefully
Drupal
Extras

14. Overview
What
Why
Features
Learn {less}
Drupal Using {less} in drupal
Extras

15. Overview
What
Why
Features
Learn {less}
Drupal
Extras Yummy extras, if time

16. What is {less}?

17. {less} extends css with new
features

18. Compiles into ordinary
(but yummy, yummy) CSS

19. A strict superset of CSS

20. Why use {less}?

21. Why?
Write less code

22. Why?
Write less code,
that’s faster to code up

23. Why?
Write less code,
that’s faster to code up,
easier (cheaper) to maintain

24. Why?
Write less code,
that’s faster to code up,
easier (cheaper) to maintain
and re-use in a project

25. Why?
Write less code,
that’s faster to code up,
easier (cheaper) to maintain
and re-use in a project
or among several projects

26. And it’s dead-easy
to learn, if you already
know CSS
- honestly!

27. Feature overview

28. Feature overview
Variables (yay!)

29. Feature overview
Variables
Mixins (it’ll make sense, promise)

30. Feature overview
Variables
Mixins
Nested rules (for prettier code)

31. Feature overview
Variables
Mixins
Nested rules
Operations (it’s almost like programming)

32. Feature overview
Variables
Mixins
Nested rules
Operations
Color functions (Want channels with your HSL?)

33. Feature overview
Variables
Mixins
Nested rules
Operations
Color functions
+ more

34. Variables

35. Variables
1 // LESS 12 /* Compiled CSS */
2 @color: #4D926F; 13 #header {
3 14 color: #4D926F;
4 #header { 15 }
5 color: @color; 16
6 } 17 h2 {
7 18 color: #4D926F;
8 h2 { 19 }
9 color: @color;
10 }
11

36. Mixins

37. Mixins
// LESS
1 .bordered {
2 border-top: dotted 1px black;
3 border-bottom: solid 2px black;
4 }
5
6 #menu a {
7 color: #111;
8 .bordered;
9 }
10 .post a {
11 color: red;
12 .bordered;
13 }

38. Mixins
/* Compiled CSS */
1 .bordered {
2 border-top: dotted 1px black;
3 border-bottom: solid 2px black;
4 }
5
6 #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. Mixins
Any css class, id og element definition can be
mixed in

40. Case: reusable styles
Define once. Use multiple time
1 .awesome-styling { <awesome css go here> }
2
3 .funky-box {
4 .awesome-styling
5 }
6
7 .even funkier box {
8 .awesome-styling
9 <additional superfunky styling>
10 }

41. Case: hard to remember
hacks workarounds
1 .obscure-msie-hack {
2 <illogical, esoteric code>
3 }
4
5 .content-that-works-in-any-other-browser {
6 <styling>
7 .obscure-msie-hack
8 }

42. meh...

43. meh...

44. Parametric mixins
Now we’re talking.
They should be spelled paramëtric mixins
and have a theme song.

45. Paramëtric mixins
// LESS
1 .rounded-corners (@radius: 5px) {
2 -webkit-border-radius: @radius;
3 -moz-border-radius: @radius;
4 border-radius: @radius;
5 }
6
7 #header {
8 .rounded-corners;
9 }
10 #footer {
11 .rounded-corners(10px);
12 }

46. Paramëtric mixins
/* Compiled CSS */
1 #header {
2 border-radius: 5px;
3 -webkit-border-radius: 5px;
4 -moz-border-radius: 5px;
5 }
6
7 #footer {
8 border-radius: 10px;
9 -webkit-border-radius: 10px;
10 -moz-border-radius: 10px;
11 }

47. Case: Vendor prefixes
Define once
1 .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 thrice
9 body { .opacity(0.8) }
10 .fancy-box { .opacity(0.4) }
11 .see-through-footer { .opacity }

48. Case: Vendor prefixes
Define once
1 .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 thrice
9 body { .opacity(0.8) }
10 .fancy-box { .opacity(0.4) }
11 .see-through-footer { .opacity }

49. Case: Variable grid
designshack.co.uk/articles/css/introducing-the-
less-css-grid

50. Case: Style library

51. @import
// Import .less
1 @import “lib.less”;
2 @import “lib2”;
// Import without processing
3 @import “lib.css”;

52. A style library
// LESS
1 // Import libraries 16 form {
2 @import “lib-typography”; 17 .lib_form-base
3 @import “lib-branding.less”; 18 .lib_form-modern
4 @import “lib-form_ui.less”; 19 ... your custom styles
5 @import “lib-buttons.less”; 20 }
6 21
7 /* Import base styling */ 22 input[type=text],
8 @import “reset.css”; 23 textarea {
9 @import “typography.css”; 24 .lib_form-input-modern
10 25 ... more custom styles
11 /* Apply library styles */ 26 }
12 body {
13 .lib_ty-base
14 .lib_brand-base
15 }

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 styling
6 <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 styles
13 }

54. Operations

55. Any number, colour or value
can be operated on

56. Operations
// LESS
1 @base: 5%;
2 @filler: @base * 2;
3 @other: @base + @filler;
4
5 color: #888 / 4;
6 background-color: @base-color + #111;
7 height: 100% / 2 + @filler;

57. {less} tells colours from units
// LESS
1 @var: 1px + 5;
2
3 // You can use brackets
4 width: (@var + 5) * 2;
5
6 // Required for compound values
7 border: (@width / 11) solid black;
/* Compiled CSS */
8 width: 22px;
9 border: 2px solid black;

58. Case: Derived styling
// LESS
1 @fontsize-default: 14px;
2 @fontsize-sec: @fontsize-default * 0.8;
3 @lineheight: 1.3;
4
5 p {
6 font-size: @fontsize-default;
7 line-height: @lineheight * @fontsize-default;
8 }
9
10 .block p {
11 font-size: @fontsize-sec;
12 line-height: @lineheight * @fontsize-sec;
13 }

59. Colour operations

60. Colour operations
1 lighten(@color, 10%); // a color 10% *lighter*
2 darken(@color, 10%); // a color 10% *darker*
3
4 saturate(@color, 10%); // a color 10% *more* saturated
5 desaturate(@color, 10%); // a color 10% *less* saturated
6
7 fadein(@color, 10%); // a color 10% *less* transparent
8 fadeout(@color, 10%); // a color 10% *more* transparent
9
10 spin(@color, -10%); // return a color with a 10 degree
larger in hue than @color
11 spin(@color, 10%); // return a color with a 10 degree
smaller hue than @color

61. Huh?
Colors are first converted to the
HSL color-space
And then manipulated at the channel level

62. Nested rules

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. Nesting
// LESS
1 #header {
2 color: black;
3
4 .navigation {
5 font-size: 12px;
6 }
7 .logo {
8 width: 300px;
9 &:hover { text-decoration: none }
10 }
11 }

65. &-operator
// LESS
1 #header {
2 color: black;
3
4 .navigation {
5 font-size: 12px;
6 }
7 .logo {
8 width: 300px;
9 &:hover { text-decoration: none }
10 }
11 }

66. {less} and Drupal™

67. Three ways to play it
The easy way in
The performance concious solution
The advanced version

68. The easy way in

69. LESS module
Automatically compiles .less files in the theme to
plain css

70. LESS module
Automatically compiles .less files in the theme to
plain css
Development mode

71. LESS module
Automatically compiles .less files in the theme to
plain css
Development mode
mylesstheme.info:
1 ;----- Stylesheets ----------------------------
2 stylesheets[screen][] = styles/mylesstheme.styles.less
3 stylesheets[screen][] = styles/mylesstheme.typography.less
4
5 ;----- IE specific stylesheets ---------------
6 ie stylesheets[if IE 7][all][] = styles/mylesstheme.ie7.less

72. Performance concious?

73. Compile locally
From the command line
$ lessc styles.less > styles.css
Compiles to stdout

74. less.app
‘The only thing easier is making fun of Internet
Explorer’

75. I’m {more} advanced

76. Compile clientside with
less.js

77. Access JS enviroment
1 @height: `document.body.clientHeight`;

78. Progressive enhancement
Build on top of css/less compiled serverside,
right?

79. Yummy extras

80. Escaping strings
// LESS
1 .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. Namespaces
1 #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 }
11
12 #header a {
13 color: orange;
14 #bundle > .button;
15 }

82. Namespaces
1 #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 }
11
12 #header a {
13 color: orange;
14 #bundle > .button;
15 }

83. String interpolation
Embed variables in strings with
the @{param} construct
1 @base-url: “http://assets.fnord.com”;
2 background-image: url(“@{base-url}/images/bg.png”);

84. JS Evaluation
1 @var: `”hello”.toUpperCase() + ‘!’`;
Becomes
2 @var: “HELLO!”;

85. Questions?

86. Thank you!

87. Slides & docs
{less} documentation: lesscss.org
Slides: slideshare.net/woeldiche
Less module: drupal.org/project/less
less.app: incident57.com/less/