Compass¶

Maintaining projects with compass-based themes requires the ability to edit SCSS files and to recompile them to CSS. Be aware that any changes to CSS files (compiled output) will be lost when the stylesheets are recompiled, so you should always make changes to the SCSS files.

Editing SCSS¶

I'm referring to SCSS which is a syntax of Sass that closely resembles CSS. From Wikipedia

Sass consists of two syntaxes. The original syntax, called "the indented syntax" uses a syntax similar to Haml.[3] It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively.

Compass-based themes are compass projects. You can identify them by the "config.rb" file in the theme directory. This config.rb specifies the location of SCSS source files and the destination of compiled output. In almost every case, "css" is the name of the output directory and "sass" is the name of the source directory.

These directories are relative to the theme directory itself. If there's any confusion, view the config.rb file to find the exact names of the directories.

# Location of the theme's resources.
css_dir         = "css" 
sass_dir        = "sass" 
extensions_dir  = "sass-extensions" 
images_dir      = "images" 
javascripts_dir = "js" 
fonts_dir       = "fonts" 

In the "sass" directory, you will

Recompiling stylesheets in a project is simple