Less css

CSS Life Style.By : Amit KumarUNICON TEAM

Agenda

• Introduction.

• Benefits of Less Css.

• CSS and CSS 3 pseudo-class and selector.

• Setup and Working atmosphere

• Go go go go with css.

• Q&A.

Introduction.

• LESS is a dynamic stylesheet language.

• Influenced Sass, Less FrameworkCSS.

• Develop in JavaScript.

• Open source.

• Main difference between other CSS precompilers being that it allows real-time compilation via LESS.js by the browse.

• LESS can run on the client-side and server-side,[4]or can be compiled into plain CSS.

Browser support

Less CSS is not yet a W3C Standard, but the major browsers support many of the properties like css and css 3.

CSS/3 Less css

IE 7 and earlier YES YES

Firefox + YES YES

Opera + YES YES

Chrome + YES YES

Safari + YES YES

Mobile Web App

YES YES

Benefits of Less Css.

• Help to enhance cross browser compatibility.

• Improve loading time.

• Improve text effects with new attributes like test shadow and text overflow.

• Improve user interface with the help multiple layout for same web site.

• Time saver for developer and client side.

E-Commerce E- Learning

Web Apps Local host App

Dynamic Web site

Mobile And Smart TV

CSS Layers.How CSS Works .

CSS and CSS 3 pseudo-class and selector

CSS and CSS 3 pseudo-class and selector

• Universal selector

• Element type selector

• Class Selector

• ID Selector

• Attribute Selector

• Selector Grouping

• Combinators

• Pseudo-classes

• Pseudo-elements 

Universal selector

*{ ⋮ declarations }

*EM{ ⋮ declarations }

* .CLASS{ ⋮ declarations }

Element type selector

E {declaration block}

P{declaration block}

ID Selector

#ID {declaration block}

ul#navigation { ⋮ declarations }

Class Selector

.className {declaration block}

Element type selector

E {declaration block}

P{declaration block}

Att

ribute

Sele

ctor

CSS / css3 Details

a[href] { ⋮ declarations } the simplest form of an attribute selector

[href] { ⋮ declarations } This selector matches any a element that has an href attribute

input[type="submit"] { ⋮ declarations } This selector matches any input element that has a type attribute

a[href^="http:"] { ⋮ declarations } an attribute containing a value that starts with the specified value

img[src$=".png"] { ⋮ declarations } an attribute containing a value that end with the specified value

div[id*=“above"] { ⋮ declarations }  matches div elements whose id attribute value contains the characters "above".

Selector Grouping

#above td { ⋮ declarations }

th { ⋮ declarations } Old Way

#above td, #above th { ⋮ declarations }

New Way..

CombinatorsDescendant Selectormatches an element that’s a descendant of a specified elementChild Selectorselects an element that’s the immediate child of a specified elementAdjacent Sibling Selectorselects an element that’s an adjacent sibling to a specified elementGeneral Sibling Selectorselects an element that’s a sibling to a specific element

ul li { ⋮ declarations }

Table tr td {⋮ declarations }

ul>li { ⋮ declarations }

h2+p { ⋮ declarations }

<h2>Heading</h2> <p>Content</p>

h2~p { ⋮ declarations } <h2>Heading</h2> <div>

<p>content.</p> </div>

Pse

udo-c

lass

es

CSS / css3 Details

:link matches link elements that are unvisited

:visited matches link elements that have been visited

:active matches any element that’s being activated by the user

:hover matches elements that are being designated by a pointing device

:focus matches any element that’s currently in focus

:first-child  matches any element that’s the first child element of its parent

:lang(C) allows elements to be matched on the basis of their languages

Pse

udo-e

lem

ents

CSS / css3 Details

:first-letter represents the first character of the first line of text within an element

:first-line represents the first formatted line of text

:before specifies content to be inserted before another element

:after specifies content to be inserted after another element

:focus matches any element that’s currently in focus

::selection represents a part of the document that’s been highlighted by the user

Setup and Working atmosphere

Setup with 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.

<script src="less.js" type="text/javascript"></script>

Go go go go with css.

• Variables

• Mixins

• Parametric Mixins

• Pattern-matching and Guard expressions

• Nested rules

• Operations

• Functions

• Namespaces

• Scope

• comment

• Importing

• Escaping

• Selector Interpolation

• Media Queries as Variables

• JavaScript evaluation

Q&A

Thank You.Amit KumarE-mail: [email protected]