7. {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
10. {less} provides the following
mechanisms:
variables
nesting
mixins
operators and
functions;
by Xhtmlchop.com
11. 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
12. {less} allows the dynamic
editability options for dynamic
stylesheet, with the help of variable
and mixins etc.
by Xhtmlchop.com
16. 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
19. 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
20. They can also behave like functions,
and take arguments. CSS does not
support Mixins.
by Xhtmlchop.com
21. 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
24. Rather than constructing long
selector names to specify
inheritance, in Less you can simply
nest selectors inside other selectors.
by Xhtmlchop.com
25. 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
30. {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
31. 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
32. Functions map one-to-one with
JavaScript code, allowing you to
manipulate values however you
want.
by Xhtmlchop.com
34. 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
37. Link your .less stylesheets with the rel set
to “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
by Xhtmlchop.com
38. 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
39. Preferred file/folder structure for ease:
frontend/less/style.less
frontend/less/includes/variables.less
frontend/less/includes/mixins.less
by Xhtmlchop.com
40. Make sure you include your
stylesheets before the script.
by Xhtmlchop.com
44. “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
46. - File Size is Deceiving/uncertain
- More Process
- Hard to Go Back
- Variety of Syntax
- Team Coordination
Source: http://jaketrent.com/post/cons-css-preprocessors/
by Xhtmlchop.com
48. 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 hint
source:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522
by Xhtmlchop.com
52. Using the {less} CSS
Preprocessor for
Smarter StyleSheets
By Dmitry Fadeyev
http://coding.smashingmagazine.com/2010/12/06/using-the-less-csspreprocessor-for-smarter-style-sheets/
by Xhtmlchop.com
54. 1. User Friendly & Smarter StyleSheet
2. Cleaner and Clear Structure With
Nesting
3. Variables For Faster Maintenance
4. Reusing Similar Classes and Styles
5. Operations & Functions
6. Namespaces and Accessors
Source: http://coding.smashingmagazine.com/2010/12/06/using-the-less-csspreprocessor-for-smarter-style-sheets/
by Xhtmlchop.com
56. 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
57. 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