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