skewer-reload-stylesheets.el --- live-edit CSS, SCSS, Less, and friends.

This is free and unencumbered software released into the public domain.

• Author: Nate Eagleson [email protected]
• Created: November 23, 2013
• Package-Requires: ((skewer-mode "1.5.3"))
• Version: 0.3.0

Commentary

This minor mode provides live-editing of CSS and transpile-to-CSS languages via skewer.

skewer-css works for many cases, but if you're dealing with multiple stylesheets and involved cascading (a.k.a. "legacy code"), it isn't so useful. What you see while live-editing is not what you see when you refresh, since skewer-css puts the updated CSS in new style tags, thus changing their specificity.

skewer-css also doesn't work with Less, SCSS, or any of the lesser-known compile-to-CSS languages - just vanilla CSS (though there is the skewer-less package, if you run Less's in-browser JS version for development).

Enter this minor mode.

It refreshes stylesheets after saves by adding or updating a query string to the relevant link tags in the browser.

Thus, what you see on a fresh pageload is always exactly what you see while live-editing.

Setup

Install from MELPA, then put the following somewhere in your init file:

(add-hook 'css-mode-hook 'skewer-reload-stylesheets-start-editing)

If you're live-editing Less, SCSS, or similar, add `skewer-reload-stylesheets-start-editing' to the appropriate hook variable, then set `skewer-reload-css-compile-command' to your transpile command:

(setq skewer-reload-stylesheets-compile-command "gulp css")

This variable is best set in .dir-locals.el, so it can be set correctly per-project.

Usage

Open a browser window for the URL whose stylesheets you want to live-edit. Skewer that window.

In emacs, open the stylesheet(s) you want to live-edit.

Make some changes in the stylesheet and save it. The updates will immediately be reflected in the skewered windows.

and there you are - cross-browser live-editing for arbitrarily complex stylesheets.

Note that browser plugins like Custom Javascript for Websites make it easy to auto-skewer URLs on pageload, so you don't have to manually re-skewer after every refresh.

Key bindings:

• C-x C-r -- skewer-reload-stylesheets-reload-buffer Note that this keybinding is deprecated, as current usage reloads stylesheets with an after-save-hook, so there is no need for a custom keybinding.