Title: Easy SCSS and JS
Author: jaapjvh
Published: <strong>March 19, 2020</strong>
Last modified: September 5, 2022

---

Search plugins

![](https://ps.w.org/jvh-easy-scss-and-js/assets/banner-772x250.png?rev=2263693)

This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.

![](https://ps.w.org/jvh-easy-scss-and-js/assets/icon.svg?rev=2263693)

# Easy SCSS and JS

 By [jaapjvh](https://profiles.wordpress.org/jaapjvh/)

[Download](https://downloads.wordpress.org/plugin/jvh-easy-scss-and-js.2.5.7.zip)

 * [Details](https://en-ca.wordpress.org/plugins/jvh-easy-scss-and-js/#description)
 * [Reviews](https://en-ca.wordpress.org/plugins/jvh-easy-scss-and-js/#reviews)
 * [Development](https://en-ca.wordpress.org/plugins/jvh-easy-scss-and-js/#developers)

 [Support](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/)

## Description

This plugin adds SCSS functionality, compresses JS for you and creates an easy way
to enqueue scripts and styles as well as localize them.

### How to use

Let’s assume this structure:
 your theme ├── assets │ ├── js │ │ └── script.js │
└── scss │ └── style.scss ├── functions.php └── …

You can now do this in your functions.php with styles:

    ```
    <?php
    add_action('wp_enqueue_scripts', static function(){
        /* Full version */
        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [],[], true);

        /* Shortest version */
        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss');

        /* Add dependencies (example: depends on handle 'bootstrap') */
        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', ['bootstrap']);

        /* Add variables */
        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [], [
            'my_cool_color' => '#0000ff',
        ]);

        /* Enqueue it yourself */
        \EasySCSSandJS\Styles::add('my_style_handle', __DIR__ .'/assets/scss/style.scss', [], [], false);
        wp_enqueue_style('my_style_handle');
    });
    ```

And this with scripts:

    ```
    <?php
    add_action('wp_enqueue_scripts', static function(){
        /* Full version */
        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], true, true);

        /* Shortest version (jquery is by default a dependency) */
        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js');

        /* No dependencies (also no jquery) */
        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', []);

        /* Add dependencies (besides jquery) */
        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery', 'other_script']);

        /* Add variables */
        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [
            'my_variable' => 'testing this awesome plugin',
        ]);

        /* Enqueue it yourself */
        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], false);
        wp_enqueue_script('my_script_handle');

        /* Add the script to the header instead of the footer */
        \EasySCSSandJS\Scripts::add('my_script_handle', __DIR__ .'/assets/js/script.js', ['jquery'], [], true, false);
    });
    ```

Use variables in SCSS:

    ```
    // This is recommended. It will throw a fatal error if your PHP doesn't set the variable for some reason.
    // If PHP does set it, it will replace $my_cool_color with the defined color in PHP.
    $my_cool_color: #ffffff !default;

    body{
      background-color: $my_cool_color; // This will be blue (#0000ff)
    }
    ```

Use variables in JS:

    ```
    alert(my_script_handle_vars.my_variable);
    ```

Compiled files will be saved in wp-content/uploads/compiled-scss-and-js. When that
folder is cleared, everything will be regenerated.

### Filters

There are filters for adding generic variables to all (or a selection) of scripts
and styles or for adding extra content to files:
 – `easy_scss_extra_variables` –`
easy_scss_add_code_before_content` – `easy_scss_add_code_after_content` – `easy_scss_create_source_map`–`
easy_scss_storage_folder_name` – `easy_scss_storage_folder` – `easy_scss_storage_folder_url`–`
easy_scss_after_compilation` – `easy_js_extra_variables` – `easy_js_storage_folder_name`–`
easy_js_storage_folder` – `easy_js_storage_folder_url` – `easy_js_after_compilation`

## Reviews

![](https://secure.gravatar.com/avatar/88dffd3e60a78e417566629391a1b1d49e0270a73a9117399e105f9c2849f645?
s=60&d=retro&r=g)

### 󠀁[Works flawlessly](https://wordpress.org/support/topic/works-flawlessly-167/)󠁿

 [Lars Jansen](https://profiles.wordpress.org/lars-2/) January 24, 2022

This plugin works flawlessly

 [ Read all 1 review ](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/reviews/)

## Contributors & Developers

“Easy SCSS and JS” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ jaapjvh ](https://profiles.wordpress.org/jaapjvh/)
 *   [ Lars Jansen ](https://profiles.wordpress.org/lars-2/)

[Translate “Easy SCSS and JS” into your language.](https://translate.wordpress.org/projects/wp-plugins/jvh-easy-scss-and-js)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/jvh-easy-scss-and-js/),
check out the [SVN repository](https://plugins.svn.wordpress.org/jvh-easy-scss-and-js/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/jvh-easy-scss-and-js/)
by [RSS](https://plugins.trac.wordpress.org/log/jvh-easy-scss-and-js/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

v2.5.7
 – Updated scssphp to 1.11.0

v2.5.6
 – Updated scssphp to 1.10.5

v2.5.5
 – Updated scssphp to 1.10.2

v2.5.4
 – Updated scssphp to 1.10.1

v2.5.3
 – Removed legacy code

v2.5.1
 – Added the easy_css_after_compilation and easy_js_after_compilation filters–
Upgraded scssphp to 1.10.0

v2.5.0
 – Added the easy_css_after_compilation and easy_js_after_compilation filters–
Upgraded scssphp to 1.9.0

v2.3.0
 – Added the ability to include URLs, which are then cached, minified and
served – Upgraded scssphp to 1.7.0

## Meta

 *  Version **2.5.7**
 *  Last updated: **4 years ago**
 *  Active installations: **50+**
 *  WordPress Version: ** 6.0 or higher **
 *  Tested up to: **6.0.17**
 *  PHP Version: ** 7.4 or higher **
 *  Language
 * [English (US)](https://wordpress.org/plugins/jvh-easy-scss-and-js/)
 * Tags:
 * [easy](https://en-ca.wordpress.org/plugins/tags/easy/)[JS](https://en-ca.wordpress.org/plugins/tags/js/)
   [ljpc](https://en-ca.wordpress.org/plugins/tags/ljpc/)[scss](https://en-ca.wordpress.org/plugins/tags/scss/)
 *  [Advanced View](https://en-ca.wordpress.org/plugins/jvh-easy-scss-and-js/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  1 5-star review     ](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/reviews/)

## Contributors

 *   [ jaapjvh ](https://profiles.wordpress.org/jaapjvh/)
 *   [ Lars Jansen ](https://profiles.wordpress.org/lars-2/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/jvh-easy-scss-and-js/)