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

10 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.

  3. We have a use case were the CSS needs to be dynamic to the users’ company, We want to change the entire theme of the portal, and not the invidivudal CSS on each page/widget based on the invidual user’s company, without using multiple portals. What approach would be considered best practice?

    1. There are many ways you could accomplish this… but not something I would be able to answer in this comment. It also depends how many companies you need to support. If it’s less than 20 companies, it would be relatively easy to map a users company to a portal record which contained the SASS variables and then just reroute the user automatically based on their Org. But there are other ways you could do this.

  4. Our app has a custom widget and we’d like to allow customizations to our widget’s CSS, but I’m not sure how to do that in the Service Portal. Sorry to reference the old UI Macro (Jelly) stuff, but there I can use this:

    var cssGR = new GlideRecord(‘content_css’);
    cssGR.addQuery(‘name’,’New Style One’);
    cssGR.query();
    cssGR.next();

    var gdt = new GlideDateTime().getNumeric();

    Ideally, I’d like to use that same stylesheet (from content_css…found in Content Management > Design > Style Sheets).

    Is there a way?

Leave a Reply to Nathan Firth Cancel reply

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