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