SCSS-Library

Description

This plugin allows you to use SCSS files directly in wp_enqueue_style. Just add the file to the list of styles and the plugin will compile it when necessary.

The base of this plugin is strongly influenced by the WP-SCSS code and extracts some ideas from Sassify. The goal is to keep the plugin updated with the latest version of scssphp, remove configuration options from the graphical interface, and use the scssphp capabilities to create debug files.

This plugin is not intended to be installed by a conventional user, but to be required by templates or plugins that wish to include SCSS style files and therefore the configuration is expected to be done in the code.

Installation

1. Decompress scss-library.zip and upload /scss-library/ to the /wp-content/plugins/ directory.
2. Activate the plugin through the Plugins menu in WordPress.

FAQ

Performance

This plugin adds many extra steps for something as simple as printing a style link tag inside a site:

• Check the creation time of the compiled file.
• Interacts with the database.
• Converts a SCSS file into a style file.

Obviously it will add a few millisecond to the loading time of the site.

How much will performance be affected?

It depends on how many SCSS files you add to the list of styles and how complex they are.

So I shouldn’t use it in production?

Of course you can use it. If you are looking for a fast site then you should also add a cache or optimization plugin to your production environment, although it is very likely that you have already done so. Personally I have worked with Comet Cache and Autoptimize without any inconvenience. Any problems you encounter with another cache plugin don’t hesitate to write down the details to replicate the error. Remember that the more information you include in the report the easier it will be to fix it.

Then what are you looking for with this plugin?

What I want is to emulate for the style files the ease of development offered by Timber. Let SCSS-Library be to SCSS what Timber is to Twig.

My goal with this plugin is to be able to change the SCSS file directly and see the result immediately. No previous compilations or commands in a terminal. It is intended for development teams that include graphic designers who understand CSS and HTML but prefer not to have to open a terminal; and to support lazy programmers who like me prefer to leave repetitive tasks to the machines.

Is this plugin bug free?

I don’t think so. Feedbacks would be appreciated.

Reviews

Almost perfect

Martin Braun December 31, 2020

Previously I was a little disappointed, because I had problems to trigger re-creation of the files when editing imported files instead of entry files. Then I found the dev mode in the toolbar, that will cause a re-compilation every time. I think it would be nice to also have a setting to prevent the check altogether and just purge the cache with one click. Overall still a solid plugin, 5 stars from me.

Oh, what a great plugin!

danniemite October 29, 2020

Smart, simple and very easy-to-use! Thanx for the great job, keep on the good work!

Yaaaaas!

clintonmills September 22, 2020

Normally I use WP-SCSS and was going to install it but then found this one. So simple. THANK YOU for this plugin.

Great plugin

Janis Ozolins August 23, 2020

This is a great and easy-to-use plugin that allows you to use SCSS files in your functions.php directly. Hopefully this gets maintained for years to come. Well done!

Completely awesome

vincentjflorio January 10, 2020

It literally was as simple as making a style.scss and enqueueing that in my child theme’s functions.php. It has been very performant even with constant changes/updates to my file, seems to support the full breadth of functions/syntax (at least as far as anything I know about and use) and it does a good job of calling out errors in a useful way. This is actually my first foray into SCSS (I’m late to the game) and to be able to have a non-buggy plugin just “do” it in the exact same way I’m already comfortable with (in the Appearance > Theme Editor area and have it automagically propagate with just a regular refresh, so that it integrates perfectly into my workflow? Nothing but a blessing.

Contributors & Developers

Changelog

0.4.1

• Catch some bugs.

0.4.0

• Refactoring to have a code easier to test.

0.3.2

• By default the plugin creates minified code.
• Maps and extended code are created when in dev mode.
• Refactoring the code to simplify the compilation manager and the error viewer.

0.3.1

• Added german translation
• Translation of comments in code to english.

0.3.0

• Update scssphp to 1.11.0.
• Code refactoring to simplify code testing and maintenance.

0.2.7

• Update scssphp to 1.0.9.

0.2.6

• Solving bugs.

0.2

• Feature: develop environment options.

0.1.6

• Solving bugs.

0.1.5

• Solving multisite bugs.

0.1.4

• Testing: Test environment added.

0.1.3

• Bug fixed: Autoptimize does not aggregate compiled files.

0.1.2

• Create compiled file if the file does not exist.
• Bug fixed: new version number in the wp_enqueue_style declaration recreates build file with a new name.

0.1.1

• Bug fixed: multisite pages lost the path to the compiled files.

0.1

• First release.