This is a presentation on the basics of LESS and how to get started using the pre processing language.

1. LESS
CSS preprocessor
Todd Shelton
Twitter: @tweenout
GitHub: TShelton41
Meetup: Dev Workshop Indy

2. WHAT IS A PRE-PROCESSOR
• Three major types: LESS, SaSS, Stylus
• It compiles the code we write in a processed language, LESS,
SaSS, Stylus
• Outputs the code to pure CSS
• Lets you create an OO CSS structure
• All need a tool to compile the language to CSS

3. What are the advantages
• They are browser compatible
• They help make your applications more modular and scalable
by using variables and other CSS properties.
• They allow us to do nesting, custom functions, math, error
checking
• Con: Takes just a little more setup than normal.
• Now lets talk about LESS

4. LESS - history
• Alexis Sellier is the original designer of the language
• LESS is built on JavaScript (was built on Ruby at first)
• LESS was designed to be as close to CSS as possible so that
valid CSS code is valid LESS Code
• LESS can compile real-time using LESS.js
• LESS has extensions but they are designed independentl
A more popular one is LESSHat

5. LESS – tools needed
• LESS can be compiled using JavaScript
• The ending file extension is .less
• You need a compiling tool
• Easier tools are out there. CodeKit(Mac), WinLess(Win),
SimpLess(both). This is just a few
• Create a less and css directory in your root folder. Then let the
tools compile your .less files into css code

6. LESS - setup
• We need to use just one style.less file and import all less files.
This will generate a css file named style.css
• Make sure that your compiler is pointing to your CSS folder.
• Order of importing files is very important
@import “variables.less
• Once you import all your less files you are ready to start
coding. Just remember that anytime you create a new less file.
You will need to import it. Try to make a less file for every part
of your site. OOCSS!
• Note: I have had trouble with SimpLess importing blank less files.

7. LESS - language
• Less is written very similar to normal CSS
p{
color: #fff;
}
• Making a variable is very easy as well
@myFontColor: #ffffff;
@myWidth: 960px;
LESS uses the @ to determine a variable or import.

8. LESS - language
• Using the variables. (make sure you have imported your variables.less file first)
p{
color: @myFontColor;
}
• Using Mixins (basically your custom function)
.rounded(@radius: 5px) {
border-radus: @radius;
-webkit-border-radus: @radius;
-moz-border-radus: @radius;
}
button {
.rounded(10px);
}

9. LESS - language
• Nesting
a{
color: @myFontColor;
&:hover {
color: @myHoverColor;
}
}
• CSS
a{
color: @myFontColor;
}
a:hover {
color: @myHoverColor;
}

10. LESS - language
• Using Operators
@myNumber: 2px;
.class {
width: @myNumber * 2// 4px
}
• Another usage
@myNumber: 2px;
.class {
width: ((@myNumber +3) * 2)// 10 px
}

11. LESS - language
• LESS Functions
@themeNavColor: #bc332d;
.class {
background-color: saturate(@themeNavColor, 10%);
}
• Another usage
@themeNavColor: #bc332d;
.class {
background-color: fadeout(@themeNavColor, 10%);
}

12. LESS - language
• Namespaces
#buttonBundle{
.button () {
display: inline-block;
background-color: grey;
&:hover { background-color: white }
}
}
#nav a {
#buttonBundle > .button;
}