Lots of trouble using LESS in a paid theme.

Hi,
I have a paid theme from Themeforest that uses LESS. It sucks, but I didn;t notice at the time. I am using the less-rails gem and things were going OK. I am now trying to put together an admin section and things are breaking down. Basically, if I @import files in application.css.less, I get the traditional red rails error screen Less Error "unrecognised input" - If I don't, I get rails red error screen LessParse Error ".border-top-radius is undefined" - Ive tried defining it myself in a stylesheet and it still blows up on me.

Screenshot, if it helps: http://i.imgur.com/xuVhLDp.png

EDIT: I Was missing a semicolon at the last @import. Now I am getting "No matching definition was found for .border-top-radius(3px)" constantly.
I am now 2 days behind because Ive been battling this. I am so stumped. Also, I have never understood why the "require tree" line always works in application.css even though it is commented out - that whole section is a mystery to me.

When you use Less or Sass (especially when variables are involved) you won't really be able to use the require section at the top for the asset pipeline. At that point, you basically just have to use the regular @import functionality of Less/Sass to do those imports.

Can you find the file that contains the border-top-radius method? It should be defined somewhere in one of those files and then when you find the file, you'll want to put that require at the top and just make sure it's included before any of the files that would be using it. I think that should do the trick for you.

" you'll want to put that require at the top" - I have no idea what that means. Screenshot of current situation. Maybe you can refer to line numbers? http://i.imgur.com/YZ8Rgat.png

The only section that contains that is in the navbar.less file:

.navbar-profile-avatar {
position: relative;
top: -1px;

width: 30px;
margin-right: .65em;
border: 2px solid @navbar-admin-link-color;

.border-top-radius (3px);
.border-bottom-radius (3px);
}

I'm still getting ".border-top-radius is undefined" - Any idea what the syntax would be for me to just define it somewhere? Site has been down for 2 days because of this. Driving me insane! Thanks Chris!! Current screenshot: http://i.imgur.com/YZ8Rgat.png

Whoops, sorry for not being clear there! I think there are a couple things affecting your setup.

So any of the require lines at the top are Rails asset pipeline features. They will add the file to the page, but you won't be able to access any of the code in them from other files. This is fine with normal CSS, but with LESS and SASS, you often need to reference variables in other files. That means that you must use @import for those instead, not require. Also, when you import, it's as if the code is all in the same file, so you can access variables in one file from another. That's what is probably causing your issue. You'll first want to make sure you import the variables and mixins before the other files.

On a related not, it's often bad to require_tree . because it will just go import all the files in the current directory disregarding any of the requirements of which file loads before another. I would say you should probably delete that line and it could be the source of most of your problems.

So all that said, I'd recommend changing your setup to look like this:

/*
*= Any CSS and SCSS file within this...
*
*= require twitter/bootstrap
*/

@import "a_variables";
@import "mixins";
@import "mainnav";
@import "navbar";
@import "navbar-notifications";
@import "dashboard";
@import "footer";
@import "sticky-footer";

Another useful thing is you should be able to reference the original theme's code to see which order they import these files. That will be pretty much the same order you'll want to have them imported in your code.

Good luck! I hope this helps!

Just to update everyone, I have had so much trouble using LESS I have decided to scrap everything and use something SASS based instead.

Aww that sucks. Keep us posted on how it goes. I'll have to do a more in-depth episode for this stuff. Some of those themes can be really, really complex. They basically market the theme as having absolutely any feature you can imagine, but that ends up with a seriously messy theme.

SASS and LESS are actually quite easy to convert to each other, I know this is old but happy to help anyone if needed.