Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

The Annotated CSS tells you which style to use where

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 bin
Octocat-spinner-32 lib
Octocat-spinner-32 .gitignore
Octocat-spinner-32 .rvmrc
Octocat-spinner-32 CHANGELOG
Octocat-spinner-32 Gemfile
Octocat-spinner-32 Gemfile.lock
Octocat-spinner-32 MIT-LICENSE
Octocat-spinner-32 README.rdoc
Octocat-spinner-32 Rakefile
Octocat-spinner-32 VERSION
Octocat-spinner-32 css-annotate.gemspec
README.rdoc

Usage

Usage:
  css-annotate [options] filename

Options:
  -c --commented   Show only rules preceded by a comment
  -p --port [num]  Port number (default 8080)
  -s --server      Run a Web server
  --syntax [name]  Either sass or scss (default)

CSS annotate single file and pipe to browser:
  css-annotate lib/css/annotate/style.scss | bcat

Run as server on port 8080, annotate files in public/stylesheets:
  css-annotate --server public/stylesheets
  open http://localhost:8080/main.css

Mount To Your App

You can mount css-annotate in your Web app (Rails 3.x, Padrino, etc) to serve annotated versions of all CSS, SCSS and SASS files. For example, to mount all files from public/stylesheets under the path /stylesheets/annotated:

mount CSS::Annotate.new=>"/stylesheets/annotated"

With yout browser, you can now access the CSS file /stylesheets/screen.css and its annotated version from /stylesheets/annotated/screen.css.

To mount files from a different path, pass it as the sole argument to CSS::Annotate. For example:

mount CSS::Annotate.new("app/views/stylesheets")=>"/stylesheets/annotated"

With your browser, you can now access the annotated SCSS file /stylesheets/annotated/screen.scss. Note that both filename and extension must match the file you want annotated.

Screenshot

Something went wrong with that request. Please try again.