SCSS Variables in Service Portal

Learn how to streamline your stylesheets in Service Portal by utilizing the full power of SCSS. In this tutorial, I’ll walk you through how to use CSS Variables in your widgets, so that they can be overridden in the Theme and Portal records. This is very useful when creating highly reusable widgets, themes or in situations where you have multiple portals sharing a theme.

SCSS is a subset of the Syntactically Awesome StyleSheets (Sass) specification and is an extension of CSS. Every valid CSS stylesheet is valid SCSS.

SCSS supports the following:

  • Variables
    Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you want to reuse. SCSS uses the $ symbol to make something a variable.
  • Nesting
    SCSS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
  • Operators
    SCSS has a handful of standard math operators like +, -, *, /, and %.
  • Mixins
    A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can pass in values to make your mixin more flexible.
  • Functions
    SASS supports the use of functions by providing some keyword arguments, which are specified using normal CSS function syntax.

Quick note: The order of CSS that is shown in the video is based on the Kingston release. In Jakarta, the Theme variables were loaded before the Portal variables.

For further reading, check out the following resources:

https://docs.servicenow.com/bundle/helsinki-servicenow-platform/page/build/service-portal/concept/scss-primer.html
https://sass-lang.com/guide
https://devhints.io/sass
https://www.tutorialspoint.com/sass/index.htm

4 comments

  1. Hi guys,

    Thank you for this cool and fast video.

    Why do we need to put the !default attribute when creating the variable in the portal ? what are the advantages ?

    Because i assume that if i juste create the variable like this in my portal : $color: #fff;
    and i redifine it in a widget like this : $color: #eee;
    This will work with the classic stylsheet priority right ? and then in the widget color will be #eee and will be #fff for the rest of the portal.

    Cheers.

    1. If you don’t use the !default attribute, the last one to set the variable would win (in this example the widget). However, then you would always have to make changes to the widget to change the color. The goal is to have the widget set the defaults that can then be overridden as needed.

  2. Is it possible to dynamically set/update SCSS variables from a server-side script?

    The use-case might be that each company would have it’s own branding elements, but we wouldn’t want to create separate portal for each company.

    1. Hi Brain,

      In that case, you can pass the branding specific configurations to the SCSS variables through variables like data.configCompanyA and the branding will be updated based in the variable values sent through server side values.

Leave a Reply

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