How to apply Less css in Genesis Framework

Question

Can anyone have experienced with Less CSS style applied in Genesis Framework with Bones Child Theme? How can I get start on it?

Please advise!

Answer 1

For any WordPress theme in general. First remove the theme stylesheets with the wp_dequeue_style function. Don't delete these files (for most themes this will the style.css and probably some other theme stylesheets) don't delete these files. Notice that the Genesis Framework en- and dequeue the stylesheet with actions. to remove them use remove_action( 'genesis_meta', 'genesis_load_stylesheet' ); (source: http://www.chriswiegman.com/2013/06/remove-the-default-style-css-in-wordpress-with-genesis/)

Than create a index.less files which should contain something like that shown below:

@import (less) "style.css"; // correct path to you original /wp_content/themes/{your_theme}/style.css
@import (less) "otherthemefile.css" // correct path to you original /wp_content/themes/{your_theme}/otherthemefile.css
/* custom less code here */

Finally compile the index.less file into something like main.css. Upload the main.css to your theme's directory and use wp_enqueue_style to load it in your theme.