Using SCSS (SASS) Variables in Widgets

An issue I have come across in the past is keeping track of all the small CSS color changes etc. Fortunately, Service Portal supports the use of SCSS variables in the widget CSS.

For example, instead of using CSS to define a color in every widget, set the dynamic Bootstrap variables in your Service Portal theme. You can also create your own custom variables to use in specific projects; i.e. $favorite-color.


Here is an example of what it would look like in the Widget CSS:


Now when a color needs to be changed across multiple widgets, you can change it in a single place. Service Portal also supports other SCSS features such as the use of Nesting, Mixins, and Operators.

Note: The Service Portal SCSS implementation is a subset of the full SASS specification.

To view a full list of default Bootstrap variables that you can customize, visit this link.

If you would like to explore more, you can view the official ServiceNow documentation.

Leave a Reply

Your email address will not be published. Required fields are marked *