Export SCSS

  • Resolved rysan

    (@rysan)


    9 years ago

    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/ 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/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Ari Stathopoulos

    (@aristath)

    9 years ago

    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

    (@aristath)

    9 years ago

    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

    (@rysan)

    9 years ago

    Awesome! Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Export SCSS’ is closed to new replies.

Tags