Application SASS Configuration File

The application Sass configuration file is located in each app's ./src/[Application]/resources/sass/config.rb file.

Below is the contents of a config.rb file. This is a Ruby file that contains the configuration settings used by Compass when compiling the app.css file. The file tells Compass where to look for the imported Sass files. Setting output_style = :expanded and environment = :production will result in the generated app.css file being formatted in a more readable form.

# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', '../touch', 'resources', 'themes')

common_sass_dir = File.join(dir, '..', '..', '../Common', 'resources', 'sass')

add_import_path common_sass_dir
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")

# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production

The Application Sass File

Each application maintains its own SASS configuration file. The configuration files are located in the ../src/[Application]/resources/sass/app.scss file where [Application] is the name of the mobile app.

Below is the content of a typical app.scss file:

@import 'sencha-touch/boston';
@import 'sencha-touch/boston/all';
@import 'mobileclient/shared';

There are two sections in this file.

• The first section uses the @import directive to indicate SASS files that should be included in the CSS compilation. This section tells the compiler to include the boston , shared and boston/all SASS files. The boston and boston/all files contain settings that determine the basic color scheme used by the app. The mobileclient/shared file contains common Archibus SASS code for CSS that is shared between all of the Archibus mobile apps.
• The second section of the file is where any app specific SASS code is placed