This is a presentation I gave on Sept. 25, 2012 for the Winnipeg PHP Group on some of the features in LESS I have started using in my own development environment.

1. Doing More With
How a meta-language can help you
take control of your stylesheets and
help improve your style productivity.

2. David Engel
• UofM grad
• .NET and PHP developer
• Tipping Canoe alumnus
• Experienced “backend” developer
PHP, C#, C++, MySQL, TransactSQL, Sphinx
• Relatively new to “frontend” development
CSS, jQuery, LESS, UX, design

3. CSS
Cascading Style Sheets
• describes look & formatting of a document
that has been created using markup
• separate style and content
• avoid specificity by harnessing the cascade

4. OOCSS
Object Oriented CSS
• separate structure and skin
• separate container and content

5. OOCSS
#button { #box {
width: 100px; width: 200px;
height: 25px; height: 400px;
background: #ccc; background: #ccc;
border: 1px solid #333; border: 1px solid #333;
border-radius: 5px; border-radius: 5px;
} }
<a id="button" href="">blah</a>
<div id="box">blah</div>

6. OOCSS
becomes…
.button { .skin {
width: 100px; background: #ccc;
height: 25px; border: 1px solid #333;
} border-radius: 5px;
.box { }
width: 200px;
height: 400px;
}
<a class="button skin" href="">blah</a>
<div class="box skin">blah</div>

7. OOCSS
Use classes for styling hooks!
Use ids for behavioral hooks!

8. DRY CSS
Don’t Repeat Yourself (Jeremy Clarke)
1. Group reusable CSS properties together
2. Use logical names for groups
3. Add selectors (not a fan of ALL-CAPS)
#WHITE-BACKGROUND,
.large-white-background,
.medium-white-background
{
background-color: #fff;
border-color: #bbb;
}

9. DRY CSS
What are we still missing?
• Descendent selectors break OOCSS – so what?
(the “OO” part of OOCSS is garbage anyways)
• No variables
• No mixins
• No inheritance

10. LESS
• variables • comparitors
• mixins • type/unit checking
• nesting • color functions
• operations • math functions
• functions • string embedding
• switches • Namespaces
• overloads • Javascripting!!!

11. LESS: Variables
@maxim-green:#8dc63f;
.color-green{
color:@maxim-green;
}

12. LESS: Mixins
• Gives us inheritance!
.rounded-corners{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#header {
.rounded-corners;
}

13. LESS: Mixins
Parametric mixins extend this functionality
.rounded-corners (@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners(5px);
}

14. LESS: Mixins
Parametric mixins can also have default values
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}

15. LESS: Nesting
Nesting gives us a kind of namespacing for specificity of
inheritance
#header {
h1 { font-size: 26px;
font-weight: bold;
}
p{ font-size: 12px;
a{ text-decoration: none;
&:hover { border-width: 1px }
}
}
}

16. LESS: Nesting
… and Scope
@red : red;
#header {
@red: #BF2E1A;
h1 {color: @red; // yields #BF2E1A
}
}
h1 {color: @red; // yields red
}

17. LESS: Operations
• add, subtract, divide and multiply properties
@red: # BF2E1A;
@main-margin: 4px;
#footer{
color: @red + #001100;
margin-left: @main-margin * 3;
}

18. LESS: Functions
Take arguments into your mixins…
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @x @y @blur @color;
-moz-box-shadow: @x @y @blur @color;
-webkit-box-shadow: @x @y @blur @color;
}
.box-shadow(3px, 7px);

19. LESS: Functions
…or use the @arguments variable to take it all!
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(3px, 7px);

20. LESS: Imperative Programming
This is a kind of switch (note the “all” selector)…
.color-mixin (dark, @color) {
color: darken(@color, 10%);
}
.color-mixin (light, @color) {
color: lighten(@color, 10%);
}
.color-mixin (@_, @color) {
display: block;
}

21. LESS: Imperative Programming
…that we can call like so:
@light-switch: light;
@dark-switch: dark;
.light-class {
.color-mixin(@light-switch, #888);
}
.dark-class {
.color-mixin(@dark-switch, #888);
}

22. LESS: Overloads
“Arity” for the geeks (and Java and .NET folks)
.fade-mixin (@a-color) {
color: @a-color;
}
.fade-mixin (@a-color, @b-color) {
color: fade(@a-color, @b-color);
}
#solid-color{
.fade-mixin(blue);
}
#faded-color{
.fade-mixin(blue, green);
}

23. LESS: Guarded mixins
• uses “when” and can use “and” “,” and “not”
• can also use the keywords “true” and “false”
.back-white{background-color:white;}
.back-black{background-color:black;}
.back-red{background-color:red;}
.mixin (@a) when (@a > 10), (@a < -10){
.back-white;}
.mixin (@a) when (@a = 10) and (@a = true){
.back-red;}
.mixin (@a) when (@a < 11) and (@a > -11) and not(@a = 10){
.back-black;}

24. LESS: Guarded mixins
• Comparitors can be very useful
• Eg. Code reuse between media types
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.mixin (@a) when (@media = print) { ... }

25. LESS: Type checking
• iscolor • isstring • isurl
• isnumber • iskeyword
.color-mixin (@a) when (isnumber(@a)) {
color: @a + #001100;}
.color-mixin (@a) when (iscolor(@a)) {
color: @a}
h1{
.color-mixin(red);}
h2{
.color-mixin(#842210);}

26. LESS: Unit checking
• ispixel • ispercentage • isem
.mixin (@a) when (ispixel(@a)) {}
.mixin (@a) when (isem(@a)) {}
.mixin (@a) when (ispercentage(@a)) {}

27. LESS: Colour Functions
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2

28. LESS: Math Functions
ceil
floor
round
percentage

29. LESS: Extract Colour Properties
hue(@color);
saturation(@color);
lightness(@color);
alpha(@color);
eg.
@old-color:#27BA19;
@new-color: hsl(hue(@old-color), 45%, 90%);

30. LESS: Embedding Strings
• For those of you familiar with XSLT or Ruby
• Use curly braces to embed the text
• Use tilde ~ to escape strings that require quotes
@base-url: "http://www.maximinc.com/";
@green-color: #8dc63f;
#header{
background: @ green-color url("@{base-url}images/img.png");
}
#footer{
filter: ~"alpha(opacity = (@{opacityPercentage}))";
}

31. LESS: Javascripting!!!
• Use backticks to embed your JS in the CSS
• Escape strings, embed, interpolate, etc.
• I haven’t played with this feature yet, but here’s an
untested example:
@var1: `"LESS ".toLowerCase()`;
@var2: `"ooooooh".toUpperCase() + '!'`;
@var3: ~`"@{var1: }" + "@{var2: }" + '!'`;

32. LESS Elements
• .gradient • .rotation
• .bw-gradient • .scale
• .bordered • .transition
• .drop-shadow • .inner-shadow
• .rounded • .box-shadow
• .border-radius • .columns
• .opacity • .translate
• .transition-duration

33. LESS: Precompilers
LESS needs to be pre-compiled into CSS using…
• simpless • less.app
• lessphp • …others
OR
to compile on the fly while developing use…
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

34. LESS: SIMPLESS
• SimpLESS compiles less into minified css
• works with Twitter bootstrap
• self-updates
• compiles on the fly (monitored polling)
• multi-platform
• free
• open source

35. LESS: SIMPLESS
This is what I do…
1. I code my LESSS in a separate project
2. I let SimpLESS monitor the local file to
compile CSS on the fly
3. I commit minified CSS to my main project
4. I reference the minified CSS using with the
SVN version tagged on in my html
<link media="screen" href=http://www.example.com/css/style.min.css?1994
type="text/css" rel="stylesheet“>

36. LESS: Eclipse plugin
I personally use the Xtext plugin – here are some
install instructions…
http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html
You can use the LESS compiler in
Eclipse, however I manage all my compilation
externally as I also use LESS with .NET and
Classic ASP code (yes!)

37. Useful links
LESS
http://www.lesscss.org
SimpLESS
http://wearekiss.com/simpless
LessElements
http://lesselements.com
Winnipeg PHP
http://winnipegphp.com
Tipping Canoe
http://www.tippingcanoe.com
David Engel
davidengel.dev@gmail.com
(developed using LESS)
http://www.maximinc.com