Cory Webb from Mano Crafted gives us an introduction to LESS n Joomla. Too bad the slides don't capture the live demo!

1. Joomla + LESS
Milwaukee JUG
May 23, 2013
Cory Webb

2. Agenda
● What is LESS
● LESS Resources
● LESS in Joomla
● Hands-on
● Questions

3. What is LESS
● “The dynamic stylesheet language”
● Everything I always wanted CSS to be
● Extends CSS with variables, mixins, nested
rules, operations and functions
● Must be compiled

4. Variables
● Set widely used values in one place
● Re-use them throughout the stylesheet
● Set once, change once

5. Mixins
● Embed all properties of a class into another
class
● Behave like functions and take arguments
● Great for setting values that have a lot of
browser prefixes
● Example: border-radius

6. Border Radius Example
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.some-class-here {
.border-radius(5px);
}

7. Nested Rules
● Nest selectors inside other selectors to specify
inheritence
<div class=”top-level”>
<div class=”next-level”>
<div class=”third-level”>
...
</div>
</div>
</div>

8. Nested Rules
● Old Way
.top-level .next-level .third-level {
/* Set styles here */
}
● With LESS
.top-level {
.next-level {
.third-level {
// Set styles here
}
}
}

9. Operations & Functions
● Operations let you add, subtract, divide and
multiply property values and colors.
● Functions can be used to transform colors,
manipulate strings and do math
● Example: color(@string); // parses a string to a color
● Function Reference: http://lesscss.org/#reference

10. LESS Resources
● Main Website: http://lesscss.org/
● LESS Compilers:
● CodeKit: http://incident57.com/codekit/
● Crunch App: http://crunchapp.net/
● LESS PHP: http://leafo.net/lessphp/

11. LESS in Joomla
● Bootstrap built into Joomla 3.0
● You still have to compile your LESS files to CSS
● Many template frameworks now include LESS-
CSS compilers
● Be wise in choosing your compiling strategy
● Server-side compiling can add to load times if you
do them on every page load
● Compile once and re-use
● Only compile when changes are made

12. Hands-on With LESS

13. Questions?
@corywebb