FileSync is growing in features. Now theme development is even easier with Sass integration. Read on to find out why all CMS developers should use Sass based development where possible.
The CMS Theme Challenge
A big challenge with implementing CMS themes in ServiceNow is managing the layers of CSS. In a standard setup we have the following approach:
- platform CSS (for lists and inputs, not changeable)
- platform theme CSS (not changeable)
- standard service now CSS files (service catalog and menu CSS etc.)
- custom fixes and style override de-activation from out of the box CSS
- customer corporate identity CSS (usually provided via a template set)
- customer corporate identity enhancements and overrides to fit with the platform
- custom CSS modules for knowledge base or service catalog that work with and extend the existing CSS
The above list is ordered in terms of general include order. A typical theme would have anywhere between 4 and 10 stylesheets depending on the complexity and CMS integration. It's important to keep standard theme CSS (copied from the default ESS theme) as it is to make use of navigation blocks and menus as well as making the upgrade process easier for future versions of ServiceNow. For maintenance reasons, every standard theme CSS file needs an extra CSS file to act as an override.
Eg,
The "service catalog" CSS record might have:
.sc_cat_item {
border: 1px solid black;
}
Our "service catalog overrides" CSS record would then have:
.sc_cat_item {
border: none; /* no border needed here */
}
With this approach we know what the specific customisations have been more easily than relying on comparing versions of the stylesheet record.
Using this approach is maintainable but can be complicated. If we can make things a bit easier then we should!
What is a CSS Pre-compiler?
CSS pre-compilers have 5 key benefits:
- Validate that the CSS has been written correctly and is valid (syntax checker)
- Re-use common CSS via "mix-ins", "partials" and variable definitions (Eg, define the corporate blue colour in one place and re-use it)
- Better modularisation (create multiple "SCSS" files that are merged into a single CSS file)
- Minimise the output footprint (smaller requests and less requests mean faster client side load and rendering times)
- Provide easy debugging where required (can output comments in CSS to easily reference back to the originating file and line)
Check out Compass which is a framework that wraps the SASS tool for more info.
When using Compass and SASS there are also icon sprite generation advantages. One can dynamically generate icon sprites without needing to perfectly position them in image editing apps like Adobe Photoshop.
Using a CSS pre-compiler then allows us to modularise the out of the box CSS and output overrides in the same CSS file. Below is an example of a potential file setup. Experienced CSS developers will see the benefit of using modules to separate CSS.
compass/sass/service_catalog.scss
compass/sass/_service_catalog_ootb.scss
compass/sass/_service_catalog_mod_product_listing.scss
css_output/service_catalog.css
Upgrade Safety and Handover
Upgrading a CMS theme has been traditionally quite hard and complex. Using a clean and structured approach to managing CSS makes a big difference when aligning the theme to a new instance version. FileSync can also upload both the .css and .scss files. The SCSS files can be uploaded to a separate CMS theme to be used as a reference. The resulting output CSS is placed in a theme that your site uses. If the ServiceNow customer does not want to use Saas in the future then simply use Compass or Saas to compile a non-debug version of the CSS for the hand over.
I encourage you to give it a try. Like most new things there is a slight learning curve but once you're past that you'll never look back! Full details on how to get started are available on the FileSync GitHub page.
