Summary | Converts content written in the Sass meta language to valid CSS |
---|---|
Short name | sass |
Content type | text |
Extension mapping | {"sass"=>"css"} |
Provided by bundle | built-in |
API doc | Webgen::ContentProcessor::Sass |
Description
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
Usage
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
@import
ed 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.
Example
Here is a short sample of a text in the Sass meta language:
#main
:width 90%
p
:border-style solid
:border-color #00f
a
:font-weight bold
a:hover
: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; }