Joomla + LESS

Milwaukee JUGMay 23, 2013Cory Webb

Agenda

● What is LESS● LESS Resources● LESS in Joomla● Hands-on● Questions

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

Variables

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

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

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);

}

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>

Nested Rules

● Old Way

.top-level .next-level .third-level {/* Set styles here */

}

● With LESS

.top-level {.next-level {.third-level {// Set styles here}}

}

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

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/

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

Hands-on With LESS

Questions?

@corywebb