Skip to content

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
Ruby
branch: master

Rack support! Mount css-annotate in your Web app to serve annotated

CSS/SCSS/SASS along the originals. See README for examples.
latest commit 5368d8f15e
@assaf authored
Failed to load latest commit information.
bin
lib Rack support! Mount css-annotate in your Web app to serve annotated
.gitignore First checkin.
.rvmrc If no commented styles, show all styles by default.
CHANGELOG Rack support! Mount css-annotate in your Web app to serve annotated
Gemfile You can now run css-annotate as a Web server with the -s/--server
Gemfile.lock Rack support! Mount css-annotate in your Web app to serve annotated
MIT-LICENSE First checkin.
README.rdoc Rack support! Mount css-annotate in your Web app to serve annotated
Rakefile First checkin.
VERSION Rack support! Mount css-annotate in your Web app to serve annotated
css-annotate.gemspec If no commented styles, show all styles by default.

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.