Unlimited Colour Schemes in wp theme for Zurb Foundation with reduxframework

Question

I am developing a WordPress theme with Zurb Foundation 5 framework and ReduxFramework as Theme Options panel. So, there is various way that i can implement Colour Schemes for WordPress theme.

1. Using Different Style Sheets with different colour Schemes.
2. Using css class and id
3. +many more way........

But, I don't want to do this way. ReduxFramework can dynamically change css files and write class or id. And I want to do this way. So i can modify Foundation 5 css style sheet class and id from ReduxFramework Options panel dynamically. And After changing, it's must change Theme colour schemes.

Foundation 5 comes with 6 main colour options. I want to change those from ReduxFramework options panel.

1. Primary Color
2. Secondary Color
3. Alert Color
4. Success Color
5. Body Font Color
6. Header Font Color

Also is there any way that i can modify or change every options that comes with Foundation 5 CSS framework from Redux Framework.

Please go to this image link. {Open this image in a new tab for bigger view}

https://i.sstatic.net/YI0aD.png

Now question is, How can i do those things ?

I know short of PHP, JS, HTML, CSS, MYSQL etc. If you describe everything in your answer, it's will be more helpful for me.

This Question is RE-POSTED from Unlimited Colour Schemes in wp theme for Foundation 5 - WordPress Development Stack Exchange: . One reputed user suggested me to ask this question here!

Answer 1

The answer given by @Dovy is right in the basics. As far as i know there is no Less version of foundation. So you will need Foundation's Sass (SCSS) files and a SASS (php) compiler.

It seems Redux has a Sass compiler built in too: Redux and Sass

1. Install Foundation code, for instance by running bower install foundation in your WordPress folder.
2. Install a php Sass compiler, see: http://leafo.net/scssphp/

Now in your Redux config file add a hook on save:

add_action('redux/options/' . $opt_name . '/saved',  "compile_sass"  );

Also see: https://github.com/reduxframework/redux-framework/issues/533

And finally add the compile_sass function to the config file (you can use the compile action as an example, see: http://docs.reduxframework.com/core/advanced/integrating-a-compiler/):

function compile_sass($values) {
    global $wp_filesystem;

    $filename = dirname(__FILE__) . '/style.css';

    if( empty( $wp_filesystem ) ) {
        require_once( ABSPATH .'/wp-admin/includes/file.php' );
        WP_Filesystem();
    }

    if( $wp_filesystem ) {
    require "scssphp/scss.inc.php";
    $scss = new scssc();
    $scss->setImportPaths("bower_components/foundation/scss/");

    // will search for `assets/stylesheets/mixins.scss'
    $css = $scss->compile('$primary-color: '.$values['primary-color'].';
    @import "foundation.scss"');

        $wp_filesystem->put_contents(
            $filename,
            $css,
            FS_CHMOD_FILE // predefined mode settings for WP files
        );
    }
}