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.
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.
Let’s assume you have $motive
variable in your SCSS file. In order to control it in Customizer, two things are required:
ct-sass
param with the value of your variable namect-sass-fonts
param with the value of your variable name in scss filesContent 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'
),
)
),
);
!default
directiveContent 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 should be added to wp-content/themes/project/theme/framework-customizations/extensions/sass-compiler/hooks.php
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;
}