I came across this awesome tool today and thought I would share my experience with others...
3 Steps to writing {less}
1.2 Download the {less}.app.
2. {less} App Usage
2.1 Drag your css folder into the "Watched Folders" section.
2.2 Switch to the "Compiler" tab and turn on "Automatically compile files when saved".
Coda Side-Note: There is a {less} plugin for Coda if ya don't mind first having to create a "Site" in your sites section first.
3.1 Import & Variables
* Variables can be used to store CSS attribute values to be reused throughout your project so as to alleviate the trouble with core changes.
3.2 "Mixins"
Yeah, it doesn't automatically mix sense just yet, but it's quite simple actually...
I would like my ".panel" class to have rounded corners; so I'm going to "mix" or add the rounded corners styling by simply adding its CSS class name (".rounded-corners") to my ".panel" class:
3.3 "Nesting stuff"
You can basically use this to nicely organize your CSS and type less ( excuse the pun ); I only have one item nested but imagine if you had more!...
3.4 Operations
If you got a special magic formula, you can implement it with basic operations even if there is a unit of measurement (e.g. px, em, etc.).
All The Files
- index.html - http://pastie.org/1010043
- lib.css - http://pastie.org/1010045
- MyStyle.less - http://pastie.org/1010049
- MyStyle.css - You don't need this but here it is anyways: http://pastie.org/1010053
- Hawaii_Killer.ttf - http://www.1001freefonts.com/HawaiiKiller.php
Summary
{less} is a pretty neat addition to any web designer/developers arsenal.
I left out "Namespaces & Accessors" and a little more as I always believe that one should have at least one look at the official docs... you can find all the {less} techniques here: http://lesscss.org/docs.
Hope this has helped you on your way to writing {less}; until next time, keep writing more, or {less}. :D
TM
Awesomeness lies in the hands of the brave.
No comments:
Post a Comment