Using SASS

The CSS for an Archibus mobile app is defined using Sass. The application Sass code is maintained in different files

• Sencha framework files
  • ../src/touch/resources/themes/stylesheets/sencha-touch/ contains the Sencha SASS code for the Sencha framework controls
• common Archibus framework files

  • ../src/Common/resources/sass/mobileclient/_shared.scss. This file contains CSS that is used in all of the Archibus mobile apps.

  • ../src/Common/resources/sass/mobileclient/_theme.scss. This file contains the base colors used by all Archibus mobile apps.

• application files
  • ../src/[Application]/resources/sass/app.scss. This file contains the SASS files and app CSS that will be used to generate the app.css file for the application

The SASS data is transformed to CSS using Compass, an open-source CSS authoring framework. See http://compass-style.org. Compass compiles the SASS code and creates the app.css file that is used in each Archibus app. The compilation is dependent on the contents of the application SASS file and the application SASS configuration file.

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