Skip to content

Latest commit

 

History

History
84 lines (57 loc) · 3.67 KB

README.md

File metadata and controls

84 lines (57 loc) · 3.67 KB
Raw

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:

screenshot

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

Digitalis