Title: Export SCSS
Last modified: August 24, 2016

---

# Export SCSS

 *  Resolved [rysan](https://wordpress.org/support/users/rysan/)
 * (@rysan)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/export-scss/)
 * I have another idea, and, that is, getting SCSS variables from Customize page
   using Kirki. SCSS allows to play with variables for colors, background-colors,
   fonts etc. It would be great having option to export data as SCSS variables.
 * Then SCSS variables could be compiled back into CSS using this plugin,
    [https://wordpress.org/plugins/wp-scss/](https://wordpress.org/plugins/wp-scss/)
   Thus, compiling back to CSS would be task for another plugin.
 * Would it be possible for ‘output’ argument, besides ‘property’, optionally, to
   have also ‘scss_variable’ where we could define SCSS variable? That ‘scss_variable’
   would get the same value as ‘property’ gets, and for ‘scss_variable’ we would
   specify variable’s name, for example,
    ‘scss_variable’ => ‘font-1’; (where ‘font-
   1’ is a variable’s name). Export data for SCSS would look like this, $font-1:“
   Helvetica Neue”,Helvetica,Arial,sans-serif;
 * In contrary to ‘property’, ‘scss_variable’ would have to contain ‘units’ as part
   of its value, if units are provided.
 * [https://wordpress.org/plugins/kirki/](https://wordpress.org/plugins/kirki/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Ari Stathopoulos](https://wordpress.org/support/users/aristath/)
 * (@aristath)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/export-scss/#post-6011906)
 * Hey there!
 * I just submitted this to the master branch on github so you can use that until
   I release an updated version.
 * This is how it works:
 * In the field you can add something like this:
 *     ```
       'variables'    => array(
       	array(
       		'name'     => '$base-font-color',
       	),
       	array(
       		'name'     => '$links-font-color',
       		'callback' => 'kirki_twentytwelve_darken_color',
       	),
       ),
       ```
   
 * and then you can have a callback function like this:
 *     ```
       function kirki_twentytwelve_darken_color( $color ) {
       	return Kirki_Color::adjust_brightness( $color, -50 );
       }
       ```
   
 * so if you want to append ‘px’ to your variables for example, then you can simply
   write a function like this:
 *     ```
       function my_custom_append_px( $value ) {
       	return $value . 'px';
       }
       ```
   
 * and then use `my_custom_append_px` as the callback for that variable.
 *  [Ari Stathopoulos](https://wordpress.org/support/users/aristath/)
 * (@aristath)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/export-scss/#post-6011907)
 * OH! I forgot to mention… to actually get the variables you’ll have to simply 
   do this:
 *     ```
       $variables = kirki_get_variables();
       ```
   
 * and then you can use that wherever you want. 🙂
 *  Thread Starter [rysan](https://wordpress.org/support/users/rysan/)
 * (@rysan)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/export-scss/#post-6011908)
 * Awesome! Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Export SCSS’ is closed to new replies.

 * ![](https://ps.w.org/kirki/assets/icon-256x256.jpg?rev=3518366)
 * [Kirki – Freeform Page Builder, Website Builder & Customizer](https://wordpress.org/plugins/kirki/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/kirki/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/kirki/)
 * [Active Topics](https://wordpress.org/support/plugin/kirki/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/kirki/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/kirki/reviews/)

## Tags

 * [scss](https://wordpress.org/support/topic-tag/scss/)

 * 3 replies
 * 2 participants
 * Last reply from: [rysan](https://wordpress.org/support/users/rysan/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/export-scss/#post-6011908)
 * Status: resolved