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.

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