Less presentation


Published on

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

Published in: Technology, Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Talk about my selfWorkSchoolInteractive wall displayFlash/FlexNew LanguagesStyling in Flash verses webNew CSS
  • Less presentation

    1. 1. LESS CSS preprocessor Todd Shelton Twitter: @tweenout GitHub: TShelton41 Meetup: Dev Workshop Indy
    2. 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. 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. 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. 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. 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. 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. 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. 9. LESS - language • Nesting a{ color: @myFontColor; &:hover { color: @myHoverColor; } } • CSS a{ color: @myFontColor; } a:hover { color: @myHoverColor; }
    10. 10. LESS - language • Using Operators @myNumber: 2px; .class { width: @myNumber * 2// 4px } • Another usage @myNumber: 2px; .class { width: ((@myNumber +3) * 2)// 10 px }
    11. 11. LESS - language • LESS Functions @themeNavColor: #bc332d; .class { background-color: saturate(@themeNavColor, 10%); } • Another usage @themeNavColor: #bc332d; .class { background-color: fadeout(@themeNavColor, 10%); }
    12. 12. LESS - language • Namespaces #buttonBundle{ .button () { display: inline-block; background-color: grey; &:hover { background-color: white } } } #nav a { #buttonBundle > .button; }