If you are a theme developer, there may be a base theme you are probably…
If you’re a front-end developer, chances are you’ve encountered the power of CSS preprocessors. SASS is among the most popular of them. If you are using SASS in your theme development, WP-SCSS will compile that into a style.css file.
What’s It Do?
WP-SCSS automatically takes scss files that in your theme’s directory and compiles them to a single style.css file using the scssphp library. The plugin tracks changes to your SASS files and will only compile them when it detects something to keep the files stored and cached. You can also choose your compiling mode (expanded, compressed, etc.) in the plugin settings. The plugin will also automatically use the enqueue function to add the compiled stylesheet to your header.
How’s It Work?
The first step is to set up your theme directory with your SASS files. The best way to do that is to create a different folder for your sass files and your CSS files. Drop all of your SASS files in there.
Now install and activate the plugin, then go to Settings -> WP-SCSS. In the “Configure Paths” section, enter in the directory of your SASS and CSS files, relative to your theme root. This is how the plugin knows where to look for the files, and what file to enqueue.
Under the “Compiling Mode” drop-down select how you would like to structure your CSS files. “Expanded” will compile files unminified, though with stripped comments and one line per property. “Nested” will compress the files slightly, though it will still have some spaces. “Compressed” will completely minify your CSS file, leaving no white space. This is the option that I would select, it’s the best for performance.
The “Error Display” drop-down menu you can leave at its default. Check the box next to “Enqueue Stylesheets” if you would like the plugin to automatically use the wp-enqueue function to insert the compiled CSS file into your WordPress site. The only reason not to select this option is if you have decided to do this manually.
That’s about it. The plugin will detect changes, and automatically compile your SASS files.
Costs, Caveats, Etc.
WP-SCSS is still fairly new, and I’m sure there are improvements to be made. If you’d like to contribute to its development or request a new feature, go to the project’s GitHub page. If you need any help with the plugin you can visit the support forums for help.