The document discusses the LESS CSS preprocessor, highlighting its advantages such as browser compatibility, modularity, and advanced features like nesting and variables. It covers the history, setup requirements, and syntax of LESS, including how to create variables, mixins, and use functions. The author provides insights on compiling LESS files and organizing them for effective CSS output.

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