SummaryConverts content written in the Sass meta language to valid CSS
Short namesass
Content typetext
Extension mapping{"sass"=>"css"}
Provided by bundlebuilt-in
API docWebgen::ContentProcessor::Sass


This processor converts the content, which is assumed to be in the Sass meta language, to valid CSS using the sass library.

This extension is only available if you have installed the sass library. The preferred way to do this is via Rubygems:

$ gem install sass


This processor should best be used in combination with the path handler copy. An easy way to do this is by creating a file with the sass extension. This file is automatically handled by the path handler copy which changes its extension to css and processes it with this processor.

Sass partials which begin with an underscore are also automatically supported. They get handled by the path handler copy but are not written to their destination path.

The sass library was also extended in some ways to provide a better integration with webgen:

  • Sass partials or other Sass/CSS files can be @imported from the node tree.

  • The Sass function relocatable can be used like the tag relocatable to generate correct relative links.

For detailed information about Sass have a look at the Sass Homepage!

If you don’t like the syntax of the Sass meta language, you may also want to try the Sassy CSS language which has a syntax based on CSS and supports the same functionality as the Sass meta language.

When writing a webgen extension bundle, you may want to have a look at the sass_load_paths extension which allows one to specify a directory of Sass/Scss files that is added to the load path of Sass/Scss.


Here is a short sample of a text in the Sass meta language:

  :width 90%
    :border-style solid
    :border-color #00f
      :font-weight bold
      :text-decoration underline

When processed by this processor, the output would look like this:

#main {
  width: 90%; }
  #main p {
    border-style: solid;
    border-color: #00f; }
    #main p a {
      font-weight: bold; }
    #main p a:hover {
      text-decoration: underline; }