Less css
Upcoming SlideShare
Loading in...5
×
 

Less css

on

  • 480 views

The basic introduction of less for new developer. It is a very dynamic style sheet and reusable.

The basic introduction of less for new developer. It is a very dynamic style sheet and reusable.

Statistics

Views

Total Views
480
Views on SlideShare
480
Embed Views
0

Actions

Likes
4
Downloads
16
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Less css Less css Presentation Transcript

  • LESS CSSByMan MathSupport Developer097 847 0 847man@web-essentials.asia
  • Agenda• What is LESS ?• LESS features• LESS Advantages• How to use LESS ?• References• Demo225-May-2013
  • What is LESS ?• Dynamic Style sheet language designedby Alexis Sellier• The CSS pre-processors• Leaner/Meaner CSS• Valid CSS is valid LESS25-May-2013 3
  • LESS Features
  • • Less variable defined with at sign (@)Less CSS25-May-2013 5Variable
  • Operations• Less allows addition, subtraction, divisionand multiplication of property values andcolorsLess CSS25-May-2013 6
  • Function (build-in)• Functions map one-to-one with JavaScriptcode, allowing manipulation of values. Itcould be Math functions, color function,…Less CSS25-May-2013 7
  • ColorFunctions
  • Mixins• Mixins allow embedding all the propertiesof a class into another class by includingthe class name as one of its properties,thus behaving as a sort of constant orvariable. They can also behave likefunctions, and take arguments.25-May-2013 9
  • Less CSS25-May-2013 10
  • NestedLess CSS25-May-2013 11
  • Guard Expression (ifstatement)Less25-May-2013 12
  • Guard Expression (ifstatement)CSS25-May-2013 13
  • Variable scope• The scope isinside the curlybracket ({ }),otherwise youhave to declareas global25-May-2013 14Error
  • LESS Advantages• Increase readability and organization ofCSS using:ImportsNested rulesComments/* comment here */// quick comment25-May-2013 15
  • LESS Advantages• Decrease how much CSS you have towrite using:VariableFunction and OperationsMixinsExpression statementNamespace25-May-2013 16
  • LESS is morewhileCSS is always sucks
  • How to use LESS ?
  • Client side• Include your less file (*.less) in <head> tag• Download less.js from http://lesscss.org• Include less.js after your less file <head>Make sure you include style sheets before the script25-May-2013 19
  • Server side• Installation (Unix/Linux OS)$ npm install –g less• Command lineCompile less as plain CSS$ lessc style.less > style.cssThis command will output the simple plain CSS25-May-2013 20
  • Server side• You might want minified CSS outputSimple minified CSS$ lessc –x style.less > style.cssMost minified CSS$ lessc –yui-compress style.less > style.cssFor more command option you can run$ lessc or$ lessc --help25-May-2013 21
  • Less compiler on Windows orMac• Cygwin (http://cygwin.com)• SimpLESS (http://wearekiss.com/simpless)• Koala (http://koala-app.com)• WinLESS (http://winless.org)• …25-May-2013 22
  • References• http://lesscss.org• http://css-tricks.com/sass-vs-less• http://dotlesscss.org• http://leafo.net/lessphp• https://github.com/cloudhead/less• http://en.wikipedia.org/wiki/LESS_(stylesheet_language)25-May-2013 23
  • Demo
  • Thanks You!