SASSY

A rather saucy way of implementing SCSS on your WordPress install. This plugin was written due to the limitations of similar plugins in the wp repository and was inspired by Juan Echeverry's SCSS-Library plugin.

Usage

Enqueue your sass files as if they were css and sassy will take care of the rest.

wp_enqueue_style('your-scss', plugin_dir_url(__FILE__) . 'style.scss');

Storage

By default, compiled css and scss source map files are saved to wp-content\scss. See the hooks section to override this behaviour.

Compiling

Sassy will compile a source file if any of the following are met:

1. The file has changed since it was last checked.
2. Any sass variables have been added, removed or changed value.
3. Compilation is forced via the sassy-run-compiler filter.
4. CTRL + SPACE is pressed in a relevant browser window (See Live Compile)

Hooks

Hook	Default	Details
sassy-compile	true	Whether to compile the current asset.
sassy-force-compile	false	Force a recompile (skips file checks).
sassy-build-path	WP_CONTENT_DIR	The directory to compile to.
sassy-build-url	WP_CONTENT_URL	URL to the compile directory.
sassy-build-directory	'/scss/' or '/scss/' . get_current_blog_id() on multi_site.	The subdirectory to compile to.
sassy-build-name	Same as source, appended with compiler index.	The name of the compiled files.
sassy-formatter	'ScssPhp\ScssPhp\Formatter\Expanded'	Class of the scss formatter.
sassy-variables	See Variables	Array of variables to be available.
sassy-src-map	true	Whether to generate the source map.
sassy-src-map-options	See Source Maps	Source map options array.
sassy-css	N/A	The compiled css.

Variables

By default only the following variables are defined, however others may be added via the sassy-variables filter. See Integrations below.

[
    'wp-content-url' => WP_CONTENT_URL,
    'template_directory_url'   => get_template_directory_uri(),
    'stylesheet_directory_url' => get_stylesheet_directory_uri(),
]

Variable keys and values can be accessed via the SCSS admin bar menu:

Live Compile

Fed up of refreshing the page to see your changes? Us too. Simply press CTRL + SPACE to recompile & reload your stylesheets at any time. This also works inside the Oxygen Builder. 🚀

Source Maps

Source maps can be selectively generated via the sassy-src-map filter. The source map configuration can be hooked via the sassy-src-map-data filter. Refer to (https://scssphp.github.io/scssphp/docs/) for further information on these parameters.

Integrations

Oxygen Builder

Sassy automatically converts the following global styles from Oxygen Builder's configuration into scss variables:

• 🎨 Global Colors ($c-color-name, $c-another-color, etc)
• 🔠 Global Fonts ($f-text, $f-display, etc)
• 📱 Break Points ($b-page, $b-tablet, $b-phone-landscape, $b-phone-portrait)
• 📐 Section & Column Spacing ($sec-px, $sec-py, $col-px)

Sassy also generates a list of breakpoints as a sass map called $breakpoints.

Credits

Inspired by Juan Echeverry's SCSS-Library.

© Jamie Perrelet 2021 - 2022