Tag: Sass

It uses the scssphp Compiler.

Installation

1. Download the latest release
2. Unzip it into your wp-content/plugins directory
3. Activate the plugin in WordPress

Compiler

This first page allows you to write and compile Sass. The resulting stylesheet is automatically enqueued.

Variables

This second page lists all registered variables, and allows you to edit their values upon compiling.

PHP Configuration

add_filter( 'sass_configuration', 'my_sass_config' );
function my_sass_config( $defaults ) {
  return array(
    'variables' => array( 'sass/_variables.scss' ),
    'imports'   => array( 'sass/bootstrap.scss', 'sass/_theme.scss' )
  );
}

Configuration of the plugin is optional, but you should at least register your variables if you are using a CSS framework.

Paths to Sass files are relative to the theme directory.

Use the filter 'sass_configuration' to return your configurations array.

• ‘variables‘ (array)
  In order to list and edit your Sass variables on the plugin dedicated page, it is necessary to register their “definition” file(s). It is assumed that those files’ only role is to declare variables and their values.
• ‘imports‘ (array)
  It will prepend the code to compile with an @import directive for each listed file. Useful to compile dependencies, and to “hide” them from the Compiler page. It is necessary to hit the “Compile” button once for these imports to be compiled.
• ‘cache‘ (string)
  Allows you to define the path to your cache directory. This directory has to be writable (0755). The default cache directory path is wp-content/cache.
• ‘search‘ (boolean)
  Wether or not to display the “Search Variables” filter box. It can come handy if you have a lot of variables. Default is true.

Once registered, you can access any variables with the function sass_get( 'my-variable' );, or override its value (upon what has been set on the Variables page) with sass_set( 'my-variable', 'my-value' ).
It is also possible to use @import directives, as well as any Sass language features, straight from the Compiler page.

Enqueuing external Sass

Out of the main stylesheet, simply use the WordPress wp_enqueue_style function to enqueue separated Sass files.

add_action( 'wp_enqueue_scripts', 'my_other_sass_enqueue' );
function my_other_sass_enqueue() {
  wp_enqueue_style( 'my-other-handle', get_template_directory_uri() . '/my-other-file.scss', array( 'wm-sass' ) );
}

It will be compared to the cached version, compiled if changes occurred, and the resulting stylesheet will be enqueued.
Don’t forget to set the main Sass stylesheet handle 'wm-sass' as a dependency (… if it is one).