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
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 Arkin authored
Failed to load latest commit information.
bin
lib
.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
README.rdoc
Rakefile
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.