by Xhtmlchop (Design to HTML/CSS) by Xhtmlchop.com
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
byXhtmlchop
(Design to HTML/CSS)
by Xhtmlchop.com
The dynamic stylesheet language.
Developed by Alexis SellierAlso Known as cloudhead.io
by Xhtmlchop.com
What is {less} ?
by Xhtmlchop.com
{less} extends CSS with dynamic behavior of its syntax like variables, mixins, operations and functions
by Xhtmlchop.com
{less} runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
by Xhtmlchop.com
{less} is open-source, with the recent version : 1.4.0
by Xhtmlchop.com
{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
by Xhtmlchop.com
Why to use {less}?
by Xhtmlchop.com
{less} provides the following mechanisms: variablesnestingmixinsoperators and functions;
by Xhtmlchop.com
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
{less} allows the dynamic editability options for dynamic stylesheet, with the help of variable and mixins etc.
by Xhtmlchop.com
{less} Syntax
by Xhtmlchop.com
Variables
Mixins
Nested Rules
by Xhtmlchop.com
Variables
by Xhtmlchop.com
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
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
Mixins
by Xhtmlchop.com
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
They can also behave like functions, and take arguments. CSS does not support Mixins.
by Xhtmlchop.com
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
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
Nested Rules
by Xhtmlchop.com
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors.
by Xhtmlchop.com
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
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
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
Very Basic and Usefull Feature of
{less}
by Xhtmlchop.com
Functions & Operators
by Xhtmlchop.com
{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
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
Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
by Xhtmlchop.com
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
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
{less} Usage
by Xhtmlchop.com
Link your .less stylesheets with the rel set to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
by Xhtmlchop.com
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
Preferred file/folder structure for ease:
frontend/less/style.lessfrontend/less/includes/variables.lessfrontend/less/includes/mixins.less
by Xhtmlchop.com
Make sure you include your stylesheets before the script.
by Xhtmlchop.com
Already Coded Project
http://74.208.70.104/43145/1a30hr6ye43145/
by Xhtmlchop.com
User’s Review
by Xhtmlchop.com
“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
Cons of {less} CSS
by Xhtmlchop.com
- 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
Editor or Applications for
{less}
by Xhtmlchop.com
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
Usefull Stuffs & References
by Xhtmlchop.com
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
{less} vs Sass Comparison
https://gist.github.com/wilmoore/820035
by Xhtmlchop.com
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
Top Benefits or {less}
by Xhtmlchop.com
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
Conclusion
by Xhtmlchop.com
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
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
Thank Youfrom
XhtmlChop.com(Design to HTML)
Related Documents
