Tutorial: Learn how to use SCSS Variables in ServiceNow Service Portal
See the full tutorial here: https://serviceportal.io/scss-variabl...
Learn how to streamline your stylesheets in ServiceNow 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.
