• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Less css
 

Less css

on

  • 431 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
431
Views on SlideShare
431
Embed Views
0

Actions

Likes
2
Downloads
15
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!