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.
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?
Yes. That is what hooks are for.
Yes, that’s a cleaner way to do it. Thanks for the tip!
warning: missing parenthesis
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.
[…] Rainbow Mode is pretty sick. Will save me a lot of time whenever I do some quick styling from now on. Also, I […]