{"id":2791,"date":"2012-03-05T11:39:52","date_gmt":"2012-03-05T10:39:52","guid":{"rendered":"http:\/\/toki-woki.net\/blog\/?p=2791"},"modified":"2022-03-29T21:53:01","modified_gmt":"2022-03-29T20:53:01","slug":"least-a-css-to-less-tool","status":"publish","type":"post","link":"http:\/\/toki-woki.net\/blog\/p2791-least-a-css-to-less-tool","title":{"rendered":"Least, a CSS to LESS tool"},"content":{"rendered":"

A few months back I discovered the concept of CSS pre-processors. At that time I knew about LESS<\/a> and Sass<\/a> and had to decide which one was the best option for me. I thought the concept was really cool but lacked a real project to start getting my hands dirty with it.<\/p>\n

Then I started working on a freelance project and Crunch<\/a> came out; I was sold. This app made me choose LESS over Sass, which may not be the best of reasons, but it seems like I’m not the only one to pick this language. As you may know the second iteration of Twitter Bootstrap<\/a> also relies on LESS, even encouraging you to use Crunch.<\/p>\n

Saturday @ilovetypography tweeted this<\/a>:<\/p>\n

Dreaming of something that takes my CSS & LESSifies it \u2014 automagically.<\/p><\/blockquote>\n

To which I replied that<\/a>:<\/p>\n

This seems possible! Will try and see if I can write such a tool, interesting idea\u2026<\/p><\/blockquote>\n

Sunday morning I started writing JavaScript, and a few hours later I had a good-looking script. Took some time to create a simple yet efficient UI, and that was it.\u00a0Least<\/a>.<\/p>\n

The tool<\/a> takes basic CSS as an input and tries its best to output the LESS or Sass source it would correspond to (including nesting, classes and pseudo-classes). I also added an option to output something for the not-so-popular-but-interesting Stylus<\/a> language.<\/p>\n

As you’ll notice in the footer of the tool’s page it’s a “five-hour project”. In order to have a decent UI as fast as possible I used Twitter Bootstrap, which has its downsides but fits perfectly this kind of projects. A “five-hour project” also means it may still be a bit buggy. Don’t hesitate to ping me on Twitter or to drop comments here.<\/p>\n

ps: Least both references LESS and “To Say the Very Least”, a track by Buck 65 on Vertex. Ah!<\/p>\n","protected":false},"excerpt":{"rendered":"

A few months back I discovered the concept of CSS pre-processors. At that time I knew about LESS and Sass and had to decide which one was the best option for me. I thought the concept was really cool but lacked a real project to start getting my hands dirty with it. Then I started […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[129,89,149,152,150,151,153],"acf":[],"_links":{"self":[{"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/posts\/2791"}],"collection":[{"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/comments?post=2791"}],"version-history":[{"count":18,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/posts\/2791\/revisions"}],"predecessor-version":[{"id":2810,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/posts\/2791\/revisions\/2810"}],"wp:attachment":[{"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/media?parent=2791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/categories?post=2791"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/tags?post=2791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}