I'm working on learning Bootstrap 3 and Less, and I've hit a dead end before I've even gotten started. After two days of trial and error, I finally landed on Koala for compiling Less into CSS. I'm on Mac OS 10.7, so Codekit is out (only runs on 8+ now), and since Koala actually runs (and I've installed a dozen pieces of software is trying to implement this workflow, including but not limited to Grunt, Ruby, Git, Bower, Jekyll, GCC, Node.js, not to mention various IDEs and text editors), I am loathe to keep trying more options, and I just hope there's some simple concept I'm missing.

I haven't even been able to start any hands on learning of Less because I've been wrestling with understanding and setting up this workflow. I finally got Koala to see the source (Less) and destination (css) files in my Bootstrap project, but when I tried to compile anything (with a straight, installed-via-Bower Bootstrap), I get a boatload of errors, and the code is not compiled. The target/destination css file remains unchanged.

I would really like to have some kind of app that keeps me out of the command line… I've spent enough time there today to last me a lifetime. Besides that, while having error detection is great, are the default BS 3 files really so riddled with errors? I have to kind of doubt it, and presume that Koala's just behind.

Note also that I have Koala set to Auto Compile, but it only throws errors when I try to compile manually. It has never compiled, even though I've successfully edited the config json file to get/put compressed files in the right place.

E.g., trying to compile alerts.less, log shows the following error:

NameError: variable @alert-padding is undefined in /Users/mattk/Documents/ilium/web2014/bootstrap-bower/bower_components/bootstrap/less/alerts.less:10:11 9 .alert { 10 padding: @alert-padding; 11 margin-bottom: @line-height-computed;

Trying to compile carousel.less, log shows this:

NameError: .transition is undefined in /Users/mattk/Documents/ilium/web2014/bootstrap-bower/bower_components/bootstrap/less/carousel.less:20:4 19 position: relative; 20 .transition(.6s ease-in-out left); 21

To recap, my questions are: Why is Koala not auto compiling, and furthermore, why is it not compiling at all? Do these errors prevent the process from completing? If Bootstrap's default .less files won't compile, then what hope do I have of editing files that will?

I've always considered myself to be at least halfway bright, and while I'm no programmer, I've always loved code… CSS and JQuery make me physically excited. But man, after this ill-fated attempt to get my head around Less, it's putting me off of this whole web-building thing.

What am I missing? It seems pretty common that people run into less compilers that don't, but I'm running out of options here. I installed a lot of the things mentioned above initilly just thinking I could bite the bullet and stay in the command line in my workflow, but it's hard to say since I can't seem to even get to the point where I'm editing .less files anyway.