This plugin adds SCSS functionality, compresses JS for you and creates an easy way to enqueue scripts and styles as well as localize them.<\/p>\n\n
Let's assume this structure:\n your theme\n \u251c\u2500\u2500 assets\n \u2502 \u251c\u2500\u2500 js\n \u2502 \u2502 \u2514\u2500\u2500 script.js\n \u2502 \u2514\u2500\u2500 scss\n \u2502 \u2514\u2500\u2500 style.scss\n \u251c\u2500\u2500 functions.php\n \u2514\u2500\u2500 ...<\/p>\n\n
You can now do this in your functions.php with styles:<\/p>\n\n
<?php\nadd_action('wp_enqueue_scripts', static function(){\n \/* Full version *\/\n \\EasySCSSandJS\\Styles::add('my_style_handle', __DIR__ .'\/assets\/scss\/style.scss', [],[], true);\n\n \/* Shortest version *\/\n \\EasySCSSandJS\\Styles::add('my_style_handle', __DIR__ .'\/assets\/scss\/style.scss');\n\n \/* Add dependencies (example: depends on handle 'bootstrap') *\/\n \\EasySCSSandJS\\Styles::add('my_style_handle', __DIR__ .'\/assets\/scss\/style.scss', ['bootstrap']);\n\n \/* Add variables *\/\n \\EasySCSSandJS\\Styles::add('my_style_handle', __DIR__ .'\/assets\/scss\/style.scss', [], [\n 'my_cool_color' => '#0000ff',\n ]);\n\n \/* Enqueue it yourself *\/\n \\EasySCSSandJS\\Styles::add('my_style_handle', __DIR__ .'\/assets\/scss\/style.scss', [], [], false);\n wp_enqueue_style('my_style_handle');\n});\n<\/code><\/pre>\n\nAnd this with scripts:<\/p>\n\n
<?php\nadd_action('wp_enqueue_scripts', static function(){\n \/* Full version *\/\n \\EasySCSSandJS\\Scripts::add('my_script_handle', __DIR__ .'\/assets\/js\/script.js', ['jquery'], [], true, true);\n\n \/* Shortest version (jquery is by default a dependency) *\/\n \\EasySCSSandJS\\Scripts::add('my_script_handle', __DIR__ .'\/assets\/js\/script.js');\n\n \/* No dependencies (also no jquery) *\/\n \\EasySCSSandJS\\Scripts::add('my_script_handle', __DIR__ .'\/assets\/js\/script.js', []);\n\n \/* Add dependencies (besides jquery) *\/\n \\EasySCSSandJS\\Scripts::add('my_script_handle', __DIR__ .'\/assets\/js\/script.js', ['jquery', 'other_script']);\n\n \/* Add variables *\/\n \\EasySCSSandJS\\Scripts::add('my_script_handle', __DIR__ .'\/assets\/js\/script.js', ['jquery'], [\n 'my_variable' => 'testing this awesome plugin',\n ]);\n\n \/* Enqueue it yourself *\/\n \\EasySCSSandJS\\Scripts::add('my_script_handle', __DIR__ .'\/assets\/js\/script.js', ['jquery'], [], false);\n wp_enqueue_script('my_script_handle');\n\n \/* Add the script to the header instead of the footer *\/\n \\EasySCSSandJS\\Scripts::add('my_script_handle', __DIR__ .'\/assets\/js\/script.js', ['jquery'], [], true, false);\n});\n<\/code><\/pre>\n\nUse variables in SCSS:<\/p>\n\n
\/\/ This is recommended. It will throw a fatal error if your PHP doesn't set the variable for some reason.\n\/\/ If PHP does set it, it will replace $my_cool_color with the defined color in PHP.\n$my_cool_color: #ffffff !default;\n\nbody{\n background-color: $my_cool_color; \/\/ This will be blue (#0000ff)\n}\n<\/code><\/pre>\n\nUse variables in JS:<\/p>\n\n
alert(my_script_handle_vars.my_variable);\n<\/code><\/pre>\n\nCompiled files will be saved in wp-content\/uploads\/compiled-scss-and-js. When that folder is cleared, everything will be regenerated.<\/p>\n\n
Filters<\/h3>\n\n
There are filters for adding generic variables to all (or a selection) of scripts and styles or for adding extra content to files:\n- easy_scss_extra_variables<\/code>\n- easy_scss_add_code_before_content<\/code>\n- easy_scss_add_code_after_content<\/code>\n- easy_scss_create_source_map<\/code>\n- easy_scss_storage_folder_name<\/code>\n- easy_scss_storage_folder<\/code>\n- easy_scss_storage_folder_url<\/code>\n- easy_scss_after_compilation<\/code>\n- easy_js_extra_variables<\/code>\n- easy_js_storage_folder_name<\/code>\n- easy_js_storage_folder<\/code>\n- easy_js_storage_folder_url<\/code>\n- easy_js_after_compilation<\/code><\/p>\n\n\nv2.5.7\n- Updated scssphp to 1.11.0<\/p>\n\n
v2.5.6\n- Updated scssphp to 1.10.5<\/p>\n\n
v2.5.5\n- Updated scssphp to 1.10.2<\/p>\n\n
v2.5.4\n- Updated scssphp to 1.10.1<\/p>\n\n
v2.5.3\n- Removed legacy code<\/p>\n\n
v2.5.1\n- Added the easy_css_after_compilation and easy_js_after_compilation filters\n- Upgraded scssphp to 1.10.0<\/p>\n\n
v2.5.0\n- Added the easy_css_after_compilation and easy_js_after_compilation filters\n- Upgraded scssphp to 1.9.0<\/p>\n\n
v2.3.0\n- Added the ability to include URLs, which are then cached, minified and served\n- Upgraded scssphp to 1.7.0<\/p>","raw_excerpt":"This plugin adds SCSS functionality, compresses JS for you and creates an easy way to enqueue scripts and styles as well as localize them.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/118646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=118646"}],"author":[{"embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jaapjvh"}],"wp:attachment":[{"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=118646"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=118646"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=118646"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=118646"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=118646"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sq-xk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=118646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}