Bones Theme and LESS

I’m in the same boat! Been trying to figure this out myself.

seriously! even a simple flowchart would be awesome!

Hmm… hope I understand where the problem is…
Maybe this could help you: https://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/

Everytime you make a change to the less files, the compiler “creates” the new css file. So you don’t have to edit the css files, they are “generated/compiled”.

There are a few ways to compile less to css, eg. the windows app or the client side javascript (not recommended).

perfect. thanks!

i got my hands on the LESS App for Mac and all is working like clockwork. the plugin i was using for Coda 2 wasn’t making the magic happen.

not1_name and ili: i installed the LESS App, went into Preferences, checked “Automatically set CSS output paths when possible,” and dragged the entire LIBRARY folder into it.

now when i change any of the LESS files and save them the CSS files are automatically generated and saved in the CSS folder of LIBRARY.

sorry not1_name, sounds like you’re on Windows, and you’re using SimpleLESS. Maybe adding the entire LIBRARY folder will help out, if you haven’t tried.

Thanks for the input everyone. which LESS app are you talking about? Is it the CodeKit version? And is it uploaded as a plugin?

Ok i found it! And downloaded it! Thanks. So LESS app is run locally. I’m using Bones already online – does this complicate anything?

i’ve already made the jump from the LESSapp to Codekit… it’s more robust and is working smoother for me.

the creator of Bones doesn’t recommend working with these files on a live site, and has many reasons why (check out his support forums on Github). i’ve only been working locally and it’s all clockwork now.

Ok great thanks yes I did read that too and I have been on his support forums on Github I probably should have instantly taken the creator’s advice but in the past I’ve preferred to work live. I just set the theme up & WordPress locally, hopefully will have more luck, will trial Codekit today also. I’ll probably pipe back up and let you know how I go! This helped initially for the local set up for future readers of this thread: https://wp.smashingmagazine.com/2011/09/28/developing-wordpress-locally-with-mamp/

This post has come back to life! I thought it was a goner…

I’ll have another go at trying to work it out. Thanks Egado for the link.

wp.tutsplus just started the first in a multi-part tutorial on making themes with Bones:

https://wp.tutsplus.com/tutorials/theme-development/making-a-theme-with-bones-getting-started/

i’m sure that they’ll dive into the LESS/SASS aspects of it at some point…

I’ve search and read and need a little help if someone has time.

I’m just trying to figure out how to compile these less files with bones. I have the less app installed, did everything listed above.

I’m editing the less files with a sugar plugin for espresso 2, but when I save the file the less app tries to compile and I get an error message.

For example, I’m just changing a color in the mixins.less file – save.

Error: ParseErrorL Syntax Error on line 65 in mixins.less:65:0

64
65 @link-color: $bones-pink;
66 @link-hover: darken($link-color, 9%)

I can’t find a step-by-step on how to get the compile step to work. Everyone says use a less app, edit and compile.

I also noticed that when I edit a less file it is trying to make a css file with that same name instead of compiling them into the style.css file. What am I doing wrong?

@lonniehb

I’m also using Bones and LESS for the first time as well.

Your Less syntax does not look correct. A @variable should equal #fff and then u refer to it later on with @variable.

I think a LESS file will usually compile into a CSS file of the same name unless u specifically have LESS files imported into a certain CSS file like the way Bones does.

I am wondering about the CSS grid that Bones uses, seems to be bootstrap stripped right down with no push and pull type classes unless I am missing something.

Yeah, I’ve given up for the time being. I took the compiled stylesheet and reconfigured it into the traditional wordpress style.css in the bones theme. I’ll dive more into LESS when I have more time.

I’ve used bones for awhile now, but it was the older version (fixed width) and I replaced the grid system with one I preferred.

@lonniehb, Are you compiling the styles.less file? If you’re just compiling the file that you made the edits in, some of them will throw up errors because the variable is being defined in other mixins that aren’t necessarily imported into the present stylesheet you are working in. Once you compile the styles.less/styles.scss file, it should compile correctly.

You can save your less/scss files to keep the changes you have made, and if you try compiling some of them, they will compile if everything ‘needed’ is contained within that specific document, but this isn’t really necessary because the styles.less/scss file will import the all of the mixins/’other less/scss files’ under one file and output everything to styles.css.

I use Crunch for my compiler b/c it’s free and it’s an adobe air app, which is really lightweight and works extremely well, but it only works for Less, not Sass. I use mac, but I believe the air apps work independently of OS.

Yeah there is far too LESS resources online for learning how to use SASS for development. But it IS a better way to work.

Here is what took me a week or two to figure out:

For cygwin users (PC) you must run the setup again and install some ruby stuff. You’ll have to Google a bit to get Compass (PAIN)

Once you get Compass running open command prompt and *C*hange *D*irectory to your bones/library/scss folder.

Make your CSS edits and type “compass compile” in the command prompt. It will compile the scss files and create usable .css files (or whatever your config.rb file tells it to do)

This process would be easier with a Mac and the Compass app ($10)

Note: I can’t get the “compass watch style.scss” type commands to WATCH for a save and automatically compile…

ANy workflow advice would be appreciated.