Emacs css-mode documentation

Installation

CSS-mode is easily installed, just insert this in your .emacs file:

(autoload 'css-mode "css-mode")
(setq auto-mode-alist       
     (cons '("\\.css\\'" . css-mode) auto-mode-alist))

Features

Font-lock

The most important feature is probably the font-locking support, which works just like all other major modes with font-lock support.

Indentation help

css-mode has now been extended to support two indentation styles: old-style and c-style. The default is old-style, but if you want c-style, put this in your .emacs:
(setq cssm-indent-function #'cssm-c-style-indenter)

The amount of indentation is controlled by the cssm-indent-level variable.

It is also possible to write your own indentation function, if you don't like the two I've provided. To do this, write a function that accepts three parameters:

position

This will be one of the symbols inside-atmedia, inside-rule, inside-rule-and-atmedia, inside-comment or outside.

column

This will be the column number of the first previous /*, { or }.

first-char-on-line

This will be the first character on the line to be indented. Usually used to see if the line to be indented starts with a }, in which case it ends a block and should be indented differently.

The function must return the column number that the line is to be indented to. If anyone writes an indentation function I'd be glad to include it in future css-mode releases.

Typing help

So far, there are three kinds of typing assistance: short-cuts, mirror mode and completion. Right now there are only two such short-cuts:

css-insert-comment

This inserts a comment and is bound to "C-c C-c".

css-insert-url

This inserts an empty URL specification and is bound to "C-c C-u".

Mirror mode is a sort of minor mode (it hasn't been made a proper minor mode, but it is conceptually similar) that changes the way some keys work. If you type a {, the matching bracket is automatically inserted. Other keys that are mirrored are " and (.

If you don't like this mode there are three ways to turn it off:

1. Edit the css-mode.el file and set the variable css-mirror-mode to nil.
2. Make your css-mode-hook call the function css-leave-mirror-mode.
3. Give the command css-leave-mirror-mode while in a CSS-mode buffer.

Completion lets you use "M-TAB" to complete the CSS property you are currently typing in the normal manner of TAB completion.