Download - Less presentation
LESSCSS preprocessorTodd SheltonTwitter: @tweenoutGitHub: TShelton41Meetup: Dev Workshop Indy
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
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
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
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
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
• 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.
@import “variables.less
LESS - language• Less is written very similar to normal CSS
• Making a variable is very easy as well
LESS uses the @ to determine a variable or import.
p { color: #fff;}
@myFontColor: #ffffff;
@myWidth: 960px;
LESS - language• Using the variables. (make sure you have imported your variables.less file first)
• Using Mixins (basically your custom function)
p { color: @myFontColor;}
.rounded(@radius: 5px) { border-radus: @radius; -webkit-border-radus: @radius; -moz-border-radus: @radius;}
button { .rounded(10px);}
LESS - language• Nesting
• CSS
a { color: @myFontColor; &:hover {
color: @myHoverColor; }}
a { color: @myFontColor;}a:hover { color: @myHoverColor;}
LESS - language• Using Operators
• Another usage
@myNumber: 2px;
.class { width: @myNumber * 2// 4px}
@myNumber: 2px;
.class { width: ((@myNumber +3) * 2)// 10 px}
LESS - language• LESS Functions
• Another usage
@themeNavColor: #bc332d;
.class { background-color: saturate(@themeNavColor, 10%);}
@themeNavColor: #bc332d;
.class { background-color: fadeout(@themeNavColor, 10%);}
LESS - language• Namespaces
#buttonBundle{ .button () { display: inline-block; background-color: grey; &:hover { background-color: white } }}
#nav a { #buttonBundle > .button;}