What is LessCSS and its Detailed Explation - Xhtmlchop
-
Upload
xhtmlchop -
Category
Technology
-
view
766 -
download
1
Transcript of What is LessCSS and its Detailed Explation - Xhtmlchop
![Page 1: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/1.jpg)
byXhtmlchop
(Design to HTML/CSS)
by Xhtmlchop.com
![Page 2: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/2.jpg)
The dynamic stylesheet language.
Developed by Alexis SellierAlso Known as cloudhead.io
by Xhtmlchop.com
![Page 3: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/3.jpg)
What is {less} ?
by Xhtmlchop.com
![Page 4: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/4.jpg)
{less} extends CSS with dynamic behavior of its syntax like variables, mixins, operations and functions
by Xhtmlchop.com
![Page 5: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/5.jpg)
{less} runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
by Xhtmlchop.com
![Page 6: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/6.jpg)
{less} is open-source, with the recent version : 1.4.0
by Xhtmlchop.com
![Page 7: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/7.jpg)
{less} is influenced by SASS (Syntactically Awesome Stylesheets) and has influenced the newer "SCSS" syntax of SASS, which adapted its CSS-like block formatting syntax.
by Xhtmlchop.com
![Page 8: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/8.jpg)
by Xhtmlchop.com
![Page 9: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/9.jpg)
Why to use {less}?
by Xhtmlchop.com
![Page 10: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/10.jpg)
{less} provides the following mechanisms: variablesnestingmixinsoperators and functions;
by Xhtmlchop.com
![Page 11: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/11.jpg)
the main difference between {less} and other CSS precompilers being that {less} allows real-time compilation via LESS.js by the browser.
by Xhtmlchop.com
![Page 12: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/12.jpg)
{less} allows the dynamic editability options for dynamic stylesheet, with the help of variable and mixins etc.
by Xhtmlchop.com
![Page 13: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/13.jpg)
{less} Syntax
by Xhtmlchop.com
![Page 14: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/14.jpg)
Variables
Mixins
Nested Rules
by Xhtmlchop.com
![Page 15: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/15.jpg)
Variables
by Xhtmlchop.com
![Page 16: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/16.jpg)
Variables allow you to specify widely used values in a single place, and then re-use them throughout the stylesheet, making global changes as easy as changing one line of code.
by Xhtmlchop.com
![Page 17: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/17.jpg)
Write as {less}:
@white: #ffffff;@nice-blue: #5B83AD;@light-blue: (@nice-blue + #111);
/* usage variables */#header { color: @light-blue; }H2 { color: @nice-blue; }
Compile as CSS:
Variables
#header { color: #5f8faf; }H2 { color: #5B83AD; }
by Xhtmlchop.com
![Page 18: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/18.jpg)
Mixins
by Xhtmlchop.com
![Page 19: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/19.jpg)
Mixins allow embedding all the properties of a class into another class by including the class name as one of its properties, thus behaving as a sort of constant or variable.
by Xhtmlchop.com
![Page 20: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/20.jpg)
They can also behave like functions, and take arguments. CSS does not support Mixins.
by Xhtmlchop.com
![Page 21: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/21.jpg)
Any repeated code must be repeated in each location. Mixins allow for more efficient and clean code repetitions, as well as easier alteration of code.
by Xhtmlchop.com
![Page 22: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/22.jpg)
Write as {less} :.rounded-corner(@radius:5px){border-radius: @radius;-webkit-border-radius:@radius;-moz-border-radius: @radius;}/* usage variables */#header { .rounded-corner; }#footer { .rounded-corner(10px); }
Compile as CSS:
Mixins
#header { border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}
by Xhtmlchop.com
![Page 23: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/23.jpg)
Nested Rules
by Xhtmlchop.com
![Page 24: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/24.jpg)
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors.
by Xhtmlchop.com
![Page 25: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/25.jpg)
CSS supports logical nesting, but the code blocks themselves are not nested. {less} allows nesting of selectors inside other selectors. This makes inheritance clear and stylesheets shorter.
by Xhtmlchop.com
![Page 26: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/26.jpg)
Write as {less} :#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } }}
Nested Rules
by Xhtmlchop.com
![Page 27: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/27.jpg)
Nested Rules
Compile as CSS:#header h1 { font-size: 26px; font-weight: bold;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p a:hover { border-width: 1px;}
by Xhtmlchop.com
![Page 28: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/28.jpg)
Very Basic and Usefull Feature of
{less}
by Xhtmlchop.com
![Page 29: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/29.jpg)
Functions & Operators
by Xhtmlchop.com
![Page 30: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/30.jpg)
{less} allows operations and functions. If some elements in your stylesheet are proportional and similar to other elements, then this syntax helps to make them dynamic.
by Xhtmlchop.com
![Page 31: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/31.jpg)
Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. Operations should only be performed within parentheses {} in order to ensure compatibility with CSS.
by Xhtmlchop.com
![Page 32: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/32.jpg)
Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
by Xhtmlchop.com
![Page 33: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/33.jpg)
Write as {less} :@the-border: 1px;@base-color: #111;@red: #842210;
#header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2);}#footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%);}
Functions &
Operators
by Xhtmlchop.com
![Page 34: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/34.jpg)
Functions References
Writing a funciton require basic javascript knowledge to pass the valid arguments and
strings.
For more details do visit:
http://lesscss.org/#reference
by Xhtmlchop.com
![Page 36: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/36.jpg)
{less} Usage
by Xhtmlchop.com
![Page 37: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/37.jpg)
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
by Xhtmlchop.com
![Page 38: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/38.jpg)
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>
by Xhtmlchop.com
![Page 39: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/39.jpg)
Preferred file/folder structure for ease:
frontend/less/style.lessfrontend/less/includes/variables.lessfrontend/less/includes/mixins.less
by Xhtmlchop.com
![Page 40: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/40.jpg)
Make sure you include your stylesheets before the script.
by Xhtmlchop.com
![Page 42: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/42.jpg)
Already Coded Project
http://74.208.70.104/43145/1a30hr6ye43145/
by Xhtmlchop.com
![Page 43: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/43.jpg)
User’s Review
by Xhtmlchop.com
![Page 44: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/44.jpg)
“I'm fairly new to {less} as well, but this is the easiest, most straightforward way I've seen to make it work and get out of your way.”
“About half use one of the preprocessor options available to them. Of the languages used, {less} is the most popular. ”
“ it doesn't have compatibility issue. that has been taken care of, as for as {less} css is concerned. I must say its preferable to use. ”
by Xhtmlchop.com
![Page 45: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/45.jpg)
Cons of {less} CSS
by Xhtmlchop.com
![Page 46: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/46.jpg)
- File Size is Deceiving/uncertain - More Process - Hard to Go Back - Variety of Syntax - Team CoordinationSource: http://jaketrent.com/post/cons-css-preprocessors/
by Xhtmlchop.com
![Page 47: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/47.jpg)
Editor or Applications for
{less}
by Xhtmlchop.com
![Page 48: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/48.jpg)
Respectively all major editors can be used for writing {less}
- Adobe DreamWeaver- Notepad++- Sublime Text 2 - Crunch! - The tastiest LESS editor (mac)- Kineticwing IDE - Coda- Geany
NOTE: DreamWeaver require Less syntax highlighter extension to enable .less file syntax highligh & code hintsource: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522
by Xhtmlchop.com
![Page 49: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/49.jpg)
Usefull Stuffs & References
by Xhtmlchop.com
![Page 50: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/50.jpg)
http://lesscss.org/
http://en.wikipedia.org/wiki/LESS_(stylesheet_language)
http://cognition.happycog.com/article/more-or-less
10 {less} CSS Examples You Should Steal for Your Projects
http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/
by Xhtmlchop.com
![Page 51: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/51.jpg)
{less} vs Sass Comparison
https://gist.github.com/wilmoore/820035
by Xhtmlchop.com
![Page 52: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/52.jpg)
Using the {less} CSS Preprocessor
for Smarter StyleSheets
By Dmitry Fadeyev
http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/
by Xhtmlchop.com
![Page 53: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/53.jpg)
Top Benefits or {less}
by Xhtmlchop.com
![Page 54: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/54.jpg)
1. User Friendly & Smarter StyleSheet2. Cleaner and Clear Structure With Nesting3. Variables For Faster Maintenance4. Reusing Similar Classes and Styles5. Operations & Functions6. Namespaces and Accessors
Source: http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/
by Xhtmlchop.com
![Page 55: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/55.jpg)
Conclusion
by Xhtmlchop.com
![Page 56: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/56.jpg)
To sum up, {less} can now be implemented with only two lines of code in your HTML and can dramatically change the way you write CSS. Spend a few days with {less} and you’ll be creating and tweaking complex stylesheets faster than ever before.
You can use {less} to create variables, perform operations on variables, nest rules, and build complicated mixins to simplify your CSS3.
by Xhtmlchop.com
![Page 57: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/57.jpg)
Other than this, there is no limitations with special Browser Compatibilities, all supportive as per the other CSS terms which we are following till date.
by Xhtmlchop.com
![Page 58: What is LessCSS and its Detailed Explation - Xhtmlchop](https://reader035.fdocuments.us/reader035/viewer/2022070604/54835700b4af9f21418b45b0/html5/thumbnails/58.jpg)
Thank Youfrom
XhtmlChop.com(Design to HTML)