Don Thorp
Life, Innovation, Fun, Tech, Dev, Design, Recipes, Teaching, and Sushi!
TigerMunky's Grrreat Trek
Leading banana slips and paw tracks along the digital highway...
-
{less} is more...
I came across this awesome tool today and thought I would share my experience with others...
3 Steps to writing {less}
1. Setup1.1 Install the less Ruby gem by opening up "Terminal" and typing in one line.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. {less} Usage3.1 OverviewBasic workflow of {less}:1. Edit ".less" files.2. Save file -> as you save, the {less}.app automatically generates the ".css" file.Tip: If you have Growl, it will notify you when it has finished.3. Review your web page.My demo site is structured and looks like so:
3.1 Import & Variables
* You can start to create reusable CSS libraries by using the "@import" syntax.* 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.Leave a Comment
-
Tiger Munky's Posterous
Life, Innovation, Fun, Tech, Dev, Design, Recipes, Teaching, and Sushi!
Comments 1 Comment