showcss-mode

[Sheldon McGrandle]

Showcss a minor mode that people who write html might find
usefull.  It displays the css for the class or id tags as you
navigate around an html file.  It reads the <link> tags or uses
magic comments to get the relevent css files.  If a match is
found, it opens another buffer and highlights the css there.

For more information, go to https://github.com/smmcg/showcss-mode

>From the README:

Table of Contents
=================
1 Show CSS
    1.1 Overview
    1.2 Usage
    1.3 Customize options
    1.4 Todo

1 Show CSS
-----------

1.1 Overview
=============

Show CSS is a minor mode for emacs.

With showcss-mode turned on, as you navigate around an HTML file the
matching css for that element will be displayed in another buffer.

[http://i.imgur.com/kYjTqxk.png]

In the current html buffer, if you move the cursor over a class=".*?"
or id=".*?" a buffer will open with the external css file loaded and
scrolled to the matching selector.

Show Css will look at the <link> tags and a custom comment tag to get
the location of external css files.

Show Css looks for a comment with this regex:
<!-- showcss: \\(.*\\) -->

For example:
<!-- showcss: /home/user/projects/facebook/site/css/main.css -->
or
<!-- showcss: ./sass_files/main.sass-->

The comment is useful if you want to use sass files directly instead
of compiling them.  Also showcss-mode will only use local files.  So
if you use css on a remote server, you will need to use the showcss
tag in you html file and have it point to a local copy of that css.

*Tested on emacs 24.*

1.2 Usage
==========

Put this in your init.el or .emacs file:

  (autoload 'showcss-mode "show_css"
     "Display the css of the class or id the cursor is at" t)

Personally, I find this mode to distracting to use all the time, so I
use this function to quickly toggle the mode on and off.

  (defun sm/toggle-showcss()
    "Toggle showcss-mode"
    (interactive)
    (if (or (string= major-mode "html-mode")
            (string= major-mode "nxml-mode")
            (string= major-mode "handlebars-mode"))
        (showcss-mode 'toggle)
      (message "Not in an html mode")))
  (global-set-key (kbd "C-c C-k") 'sm/toggle-showcss)


1.3 Customize options
======================

<alt x>, customize-group, showcss

Here you can set the faces of the element highlights

1.4 Todo
=========

  1) Show css from style attributes that have multiple classes.
     e.g. style="style1 style2 style3"