Skip to Content


Get the value of a Sass variable from a theme partial file.

PHP June 8, 2019


nebula()->get_sass_variable($variable, $filepath, $return);


(Optional) (String) The variable name to get the value of
Default: $primary_color

(Optional) (String) The theme or full filepath to get the variable from
Default: child

(Optional) (String) What to return
Default: value

Parameter Notes

Variable names will be normalized, so ‘primary_color’, ‘primary’, and ‘$primary_color’ are all equivalent. Note: This is not meant to be used for multi-line variables.

$filepath can be “child”, “parent”, or a full filepath (including filename and extension) of where to look for the variable. Passing “child” or “parent” will only look for a _variables.scss file within the respective /assets/scss/partials/ directory.

If $return is “value” only the value of the found variable will be returned. Otherwise, it will return all “parts” of that line.

Request or provide clarification »


Get the primary color from the child theme.

<?php echo nebula()->get_sass_variable('$primary_color'); ?>

Get a test variable from an animations partial and return all parts of the line.

<?php var_dump( nebula()->get_sass_variable('$testing', get_template_directory() . '/assets/scss/partials/_animations.scss', true) ); ?>
Was this page helpful? Yes No

    A feedback message is required to submit this form.

    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /libs/Utilities/Sass.php on line 396.

    1 Hook

    Find these filters and actions in the source code below to hook into them. Use do_action() and add_filter() in your functions file or plugin.

    Need a new filter hook? Request one here.

    This function has no action hooks available. Request one?

            public function get_sass_variable($variable='$primary_color', $filepath='child', $return='value'){
                $override = apply_filters('pre_get_sass_variable', null, $variable, $filepath, $return);
                if ( isset($override) ){return $override;}
                //Use the passed variables file location, or choose from the passed theme
                if ( $filepath === 'parent' ){
                    $filepath = get_template_directory() . '/assets/scss/partials/_variables.scss';
                } elseif ( $filepath === 'child' && is_child_theme() ){
                    $filepath = get_stylesheet_directory() . '/assets/scss/partials/_variables.scss';
                $variable_name = $this->normalize_color_name($variable);
                $transient_name = 'nebula_sass_variable_' . $variable_name; //Does this need to be more unique (to include the location too)? Cannot just append $filepath...
                $scss_variables = nebula()->transient($transient_name, function($data){
                    $timer_name = $this->timer('Sass Variable (' . $data['variable'] . ')', 'start', 'Sass');
                    if ( !file_exists($data['filepath']) ){
                        $this->timer($timer_name, 'end');
                        return false;
                    global $wp_filesystem;
                    $scss_variables = $wp_filesystem->get_contents($data['filepath']);
                    $this->timer($timer_name, 'end');
                    return $scss_variables;
                }, array('variable' => $variable, 'filepath' => $filepath), HOUR_IN_SECONDS*12);
                preg_match('/(?<comment>\/\/|\/\*\s?)?\$' . $variable_name . ':\s?(?<value>.*)(;|\s?!default;)(.*$)?/m', $scss_variables, $matches);
                //Return the entire line if requested
                if ( $return === 'all' ){
                    return $matches;
                if ( empty($matches['value']) ){
                    return false; //Color was not found
                //If the color is exists but is commented out ignore it
                if ( !empty($matches['comment']) ){
                    return false; //This is breaking lots of things
                //Remove "!default" from colors if it exists
                if ( $return === 'color' ){
                    return trim(preg_replace('/(!default)/i', '', $matches['value']));
                return trim($matches['value']);


    To override this PHP function, use this hook in your child theme or plugin ("my_custom" can be changed):

    add_filter('pre_get_sass_variable', 'my_custom_get_sass_variable', 10, 4); //The last integer must be 1 more than the actual parameters
    function my_custom_get_sass_variable($null, $variable, $filepath, $return){ //$null is required, but can be ignored
        //Write your own code here
        return true; //Return true to prevent the original function from running afterwords

    You can completely disable this PHP function with a single line actions:

     add_filter('pre_get_sass_variable', '__return_false');