latest version

Sass Compiler

Sass Compiler extension allows users to use Customizer options to control theme styles (SCSS) variables such as theme motive color, as well as automatic sass recompilation during Build process.

Important

Sass Compiler extension is disabled by default. User needs to activate it in wp-admin Unyson settings menu.

Configuration

In order to configure Sass Compiler in your project, create the following file: wp-content/themes/projectname/theme/framework-customizations/extensions/sass-compiler/config.php

With the following content:

<?php if ( ! defined( 'FW' ) ) {
    die( 'Forbidden' );
}

$uploads = wp_upload_dir();

$cfg = array(
    'handles'      => array( 'fw-ct-bee-sass-style' => 'style.scss' ),
    'sass_dir'     => get_stylesheet_directory() . '/assets/sass', // where are stored SCSS files
    'css_dir'      => get_stylesheet_directory() . '/assets/css',  // where to store CSS files
    'formatter'    => defined( 'WP_DEBUG' ) && WP_DEBUG ? 'Leafo\ScssPhp\Formatter\Expanded' : 'Leafo\ScssPhp\Formatter\Crunched',
    'css_save_dir' => $uploads['path'],
    'css_uri'      => $uploads['url'],
);

This assumes you have enqueued a style handle fw-ct-bee-sass-style with a path of wp-content/themes/projectname/theme/assets/sass/style.scss and the path to the theme custom CSS file is wp-content/themes/projectname/theme/assets/css/style.css

That’s basically it.

Customizer Variables

Let’s assume you have $motive variable in your SCSS file. In order to control it in Customizer, two things are required:

  • Customizer option has ct-sass param with the value of your variable name
  • For fonts use ct-sass-fonts param with the value of your variable name in scss files

Content of wp-content/themes/projectname/theme/framework-customizations/theme/options/customizer.php:

$options = array(
    'theme' => array(
        'title'   => esc_html__( 'General', 'ct_theme' ),
        'options' => array(
            'motive' => array(
                'type'    => 'color-picker',
                'label'   => esc_html__( 'Pick the motive color', 'ct_theme' ),
                'desc'    => esc_html__( 'In order to use this feature, please have Sass Compiler enabled in Unyson extensions', 'ct_theme' ),
                'value'   => '#00bcdf',
                'ct-sass' => 'motive'
            ),
        )
    ),
);
  • SCSS variable has a !default directive

Content of wp-content/themes/projectname/theme/assets/sass/partials/_motive.scss:

$motive : #00bcdf !default;

Tip

As in the example, you can define SCSS variables in convenient partials which can be included in style.scss.

Note

Don’t forget to enable Sass Compiler extension in wp-admin Unyson menu before testing.

Hooks

Hooks should be added to wp-content/themes/project/theme/framework-customizations/extensions/sass-compiler/hooks.php

fw_ext_sass_compiler_variables

Should you ever need to use assets path variable in SCSS file, you may find fw_ext_sass_compiler_variables filter useful.

<?php

/**
 * Set path to css assets folder to fix relative paths in css compiled to /uploads
 */
add_filter( 'fw_ext_sass_compiler_variables', 'fw_ct_bee_filter_theme_fw_ext_sass_compiler_variables', 10, 2 );
function fw_ct_bee_filter_theme_fw_ext_sass_compiler_variables( $vars, $compiler ) {
    $vars['$path'] = get_stylesheet_directory_uri() . '/assets/css/';
    $vars['$path'] = str_replace( 'http://', '//', $vars['$path'] );
    $vars['$path'] = str_replace( 'https://', '//', $vars['$path'] );

    return $vars;
}