WP-SCSS

Description

Compiles .scss files on your wordpress install using lefo’s scssphp. Includes settings page for configuring directories, error reporting, compiling options, and auto enqueuing.

The plugin only compiles when changes have been made to the scss files. Compiles are made to the matching css file, so disabling this plugin will not take down your stylesheets. In the instance where a matching css file does not exist yet, the plugin will create the appropriate css file in the css directory.

Get detailed instructions on github

Installation

  1. Upload plugin to plugins directory
  2. Active plugin through the ‘Plugins’ menu in WordPress
  3. Configure plugin options through settings page settings -> WP-SCSS.

FAQ

Can I use a child theme?

Yes, absolutely. Make sure you define your directories relative to your child theme and that your child theme is active. Otherwise you’ll see an error regarding missing directories.

How do I @import subfiles

You can import other scss files into parent files and compile them into a single css file. To do this, use @import as normal in your scss file. All imported file names must start with an underscore. Otherwise they will be compiled into their own css file.

When importing in your scss file, you can leave off the underscore.

@import 'subfile';

Does this plugin support Compass?

Currently there isn’t a way to fully support compass with a php compiler. If you want limited support, you can manually import the compass framework. You’ll need both the _compass.scss and compass directory.

`compass / frameworks / compass / stylesheets /

@import 'compass';

Alternatively, you can include Bourbon in a similar fashion.

Can I use .sass syntax with this Plugin?

This plugin will only work with .scss format.

It’s not updating my css, what’s happening?

Do you have errors printing to the front end? If not, check your log file in your scss directory. The css will not be updated if there are errors in your sass file(s).

Make sure your directories are properly defined in the settings. Paths are defined from the root of the theme.

I’m having other issues and need help

If you are having issues with the plugin, create an issue on github, and we’ll do our best to help.

Reviews

Game Changer

This plugin works flawlessly, out of the box. We’ve added it to our theme blueprint so now we are running it on all of the sites for which we use sass. And, since it only recompiles if there is a change to the original .scss file, rather than page load, it is very resource friendly. I’ll never go back to local sass compiling again. Now I can keep all my theme stylesheets in sass forever, and as the project passes from developer to developer, everyone can work off the same sass file. Brilliant. Thank you. Sending you beer money!

Excellent solution for frontend developers working on the same project

This plugins is excellent for two reasons:

Waiting for the watcher to compile the scss files locally is boring, and finding the style.css file and uploading it is annoying, with this plugin I just upload the file that I’m working in currently (for example header.scss) and the magic happens by itself.

Secondly and the reason why I looked for this, is that two or more developers can work on the frontend without stepping over each others styles every time they upload the style.css file, with this approach the workflow is smooth AF.

Thanks from Argentina.

Wow

More people should be using this in combination with the Customizer or theme options to prevent styles being output in the head section.

Works Well

I haven’t looked at the code at all so I can’t say anything about the coding standards or efficiency of the plugin, but it works and without any problems!

Great work, thank you!

Read all 30 reviews

Contributors & Developers

“WP-SCSS” is open source software. The following people have contributed to this plugin.

Contributors

Translate “WP-SCSS” into your language.

Interested in development?

Browse the code or subscribe to the development log by RSS.

Changelog

1.2.2

  • Updated scssphp to version 0.6.6

1.2.1

  • Changed set version option to update if already exists

1.2.0

  • Fixed a bug where directory inputs were not getting sanitized @mmcev106
  • Made the missing directory warning also display if a specified path is a file @mmcev106
  • Added /vendor to .gitignore @mmcev106
  • Dont enqueue already enqueued stylesheets @bobbysmith007

1.1.9

  • Added filter to set variables via PHP @ohlle
  • Added option to minify CSS output @mndewitt

1.1.8

Various improvements from pull requests by @jbrains and @brainfork

1.1.7

  • Update scssphp to 0.0.12 – pull from #16 @GabrielGil

1.1.6

  • Upgraded scss.inc.php to version 0.0.10; via pull request from kirkhoff

1.1.5

  • Added option to only show errors to logged in users; via pull request from tolnem

1.1.4

  • Add suport for subfolders in scss directory

1.1.3

  • Hotfix for a accidental character

1.1.2

  • Added support for moved wp-content directories

1.1.1

  • Added error handling for file permissions issues
  • Changed error log to .log for auto updating errors

1.0.0

  • Initial Build