Emacs GNU/Linux Free Software & Open Source Programming & Web Development

Easy CSS editing with Emacs

Editing CSS in Emacs is very easy since the standard CSS mode comes included by default. But developer Julien Danjou created this nice minor mode called rainbow-mode which will display the color of the code as the background of the code’s text. It is very useful to immediately see the colors right there in the style sheet instead of trying to remember each code and then test in the browser window.

One of the problems I had was when opening any CSS file, it would open by default css-mode, but I had to manually load rainbow-mode every time. The elisp function auto-mode-alist is used to detect a file type by its name and running a function associated with it, generally the function to enable a major mode to edit that type of file. For minor modes I couldn’t find anything that would allow me to launch them without inhibiting the mayor mode’s startup.

So since auto-mode-alist takes a regular expression for the file type and only one function as its arguments, I wrote a function that will run both and use that as the second argument to execute.

;; CSS and Rainbow modes 
(defun all-css-modes() (css-mode) (rainbow-mode)) 

;; Load both major and minor modes in one call based on file type 
(add-to-list 'auto-mode-alist '("\\.css$" . all-css-modes)) 

Hope you find it useful and you like the combination of css-mode and rainbow-mode as much as I do.

By Gabriel Saldaña

Gabriel Saldaña is a web developer, photographer and free software advocate. Connect with him on and Twitter

7 replies on “Easy CSS editing with Emacs”

Yeah rainbow-mode is awesome.

Wouldn’t (add-hook ‘css-mode-hook ‘rainbow-mode) or otherwise (add-hook ‘css-mode-hook ‘(lambda () (rainbow-mode 1)) have worked just as fine?

I’ve tried Tom’s suggestion with no success:

(load-file “~/.emacs.d/rainbow-mode.el”)
(require ‘rainbow-mode)
(add-hook ‘css-mode-hook ‘rainbow-mode)
;;(add-hook ‘css-mode-hook (lambda () (rainbow-mode 1)))

An error occurred while loading [.emacs]:
Symbol’s value as variable is void: css-mode-hook

Any ideas?

BTW, the hook doesn’t appear to be necessary, unless I’ve been overlooking something.

Comments are closed.