less css
DESCRIPTION
At AboveTRANSCRIPT
![Page 1: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/1.jpg)
CSS Life Style.By : Amit KumarUNICON TEAM
![Page 2: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/2.jpg)
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.
![Page 3: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/3.jpg)
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.
![Page 4: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/4.jpg)
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
![Page 5: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/5.jpg)
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
![Page 6: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/6.jpg)
CSS Layers.How CSS Works .
![Page 7: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/7.jpg)
CSS and CSS 3 pseudo-class and selector
![Page 8: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/8.jpg)
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
![Page 9: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/9.jpg)
Universal selector
*{ ⋮ declarations }
*EM{ ⋮ declarations }
* .CLASS{ ⋮ declarations }
![Page 10: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/10.jpg)
Element type selector
E {declaration block}
P{declaration block}
![Page 11: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/11.jpg)
ID Selector
#ID {declaration block}
ul#navigation { ⋮ declarations }
![Page 12: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/12.jpg)
Class Selector
.className {declaration block}
![Page 13: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/13.jpg)
Element type selector
E {declaration block}
P{declaration block}
![Page 14: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/14.jpg)
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".
![Page 15: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/15.jpg)
Selector Grouping
#above td { ⋮ declarations }
th { ⋮ declarations } Old Way
#above td, #above th { ⋮ declarations }
New Way..
![Page 16: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/16.jpg)
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>
![Page 17: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/17.jpg)
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
![Page 18: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/18.jpg)
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
![Page 19: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/19.jpg)
Setup and Working atmosphere
![Page 20: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/20.jpg)
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>
![Page 21: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/21.jpg)
Go go go go with css.
![Page 22: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/22.jpg)
• Variables
• Mixins
• Parametric Mixins
• Pattern-matching and Guard expressions
• Nested rules
• Operations
• Functions
![Page 23: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/23.jpg)
• Namespaces
• Scope
• comment
• Importing
• Escaping
• Selector Interpolation
• Media Queries as Variables
• JavaScript evaluation
![Page 24: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/24.jpg)
Q&A
![Page 25: Less css](https://reader033.vdocuments.net/reader033/viewer/2022061110/5453363daf7959c07f8b730f/html5/thumbnails/25.jpg)
Thank You.Amit KumarE-mail: [email protected]