• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Less - an Introduction

Less - an Introduction



LESS is a dynamic stylesheet language designed by Alexis Sellier.

LESS is a dynamic stylesheet language designed by Alexis Sellier.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Less - an Introduction Less - an Introduction Presentation Transcript

    • .less – Best CSS wayAn Introduction to less CSS framework By Jaydev Gajera
    • WHAT is CSS? Are you joking?We all know that Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. i.e. HTML
    • Good CSS looks like this:
    • Good CSS looks like this: Redundant code
    • Multiple ClassesCSS looks good: Markup not so much:
    • .Less can help here
    • What is less ? less is a dynamic stylesheet language. Less is available at lesscss.org It can be applied by Variables Mixins Nested Rules Functions & Operations
    • VariablesVariables allow you to specify widely used values in a single place, and thenre-use them throughout the style sheet, making global changes as easy aschanging one line of code.
    • MixinsMixins allow you to embed all the properties of a class into another class bysimply including the class name as one of its properties. It’s just like variables, butfor whole classes. Mixins can also behave like functions, and take arguments, asseen in the example below.
    • Nested RulesRather than constructing long selector names to specify inheritance, in Less you cansimply nest selectors inside other selectors. This makes inheritance clear and stylesheets shorter.
    • Functions & OperationsOperations let you add, subtract, divide and multiply property values and colors,giving you the power to create complex relationships between properties.Operations should only be performed within parentheses in order to ensurecompatibility with CSS.
    • Client-side usage Link your .less stylesheets with the rel set to “stylesheet/less”<link rel="stylesheet/less" type="text/css" href="styles.less"> Then download less.js from the top of the page, and include it in the <head> element of your page, like so:<script src="less.js" type="text/javascript"></script> Make sure you include your stylesheets before the script.
    • Question : How to use with with windows?Answer : Use Winless. Available at winless.orgWinless WinLess is a Windows GUI LESS compiler. WinLess is a must-have for the webdeveloper who uses WindowsUsage When you add a folder to WinLess (either via Add folder or by dropping it on the folder pane), WinLess will start watching the LESS files in it. WinLess will automatically recompile a less file when it is changed. If you have a folder called less and a folder called css on the same level, add the parent folder. WinLess will then automatically use the css folder as output folder.
    • Thank youHave a best .less !