Less presentation
Upcoming SlideShare
Loading in...5
×
 

Less presentation

on

  • 460 views

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

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

Statistics

Views

Total Views
460
Views on SlideShare
394
Embed Views
66

Actions

Likes
0
Downloads
5
Comments
0

2 Embeds 66

http://librosweb.es 55
https://twitter.com 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Talk about my selfWorkSchoolInteractive wall displayFlash/FlexNew LanguagesStyling in Flash verses webNew CSS

Less presentation Less presentation Presentation Transcript

  • LESS CSS preprocessor Todd Shelton Twitter: @tweenout GitHub: TShelton41 Meetup: 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 @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.
  • 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.
  • 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); }
  • LESS - language • Nesting a{ color: @myFontColor; &:hover { color: @myHoverColor; } } • CSS a{ color: @myFontColor; } a:hover { color: @myHoverColor; }
  • LESS - language • Using Operators @myNumber: 2px; .class { width: @myNumber * 2// 4px } • Another usage @myNumber: 2px; .class { width: ((@myNumber +3) * 2)// 10 px }
  • LESS - language • LESS Functions @themeNavColor: #bc332d; .class { background-color: saturate(@themeNavColor, 10%); } • Another usage @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; }