Questions about SCSS in Service Portal themes

[davilu]

I'm a bit confused about how SCSS defined in Themes get applied to Pages and Widgets.  For example,

$navbar-inverse-bg: 	white !default;

How does the navbar widget know to make the background color white?  I took a look at the Header widget code and could not find $navbar-inverse-bg anywhere.

Additionally what is the difference between these two:

// Define Body 
$sp-body-bg:			#f0f3f4 !default;
$body-bg: 				#f0f3f4 !default;

Thanks!

[Matt Metten]

It's actually defined at the CSS level. So in your theme, look for the CSS files that are associated, or look in the CSS field of the header widget and you'll see the variable being used.

So, if I define in the theme a value/variable of $navbar-inverse-bg: white; then in the CSS I can say something like:

.navbar-inverse {
  background-color:$navbar-inverse-bg;
}

This then allows you to use one variable in SCSS in your CSS as many times as you like. So you could also then do something like:

.sub-navbar {
  background:$navbar-inverse-bg;
}

and have a theme where it brings the same color for navbar and sub-navbar. The power of the variable...

[Alikutty A · Accepted solution]

Hi,

You wont see the navbar-inverse in any widgets or pages as it is declared in the Bootstrap CSS class.

If you want to find its actual location, then inspect your header or any HTML where you see the color and look for the .navbar-inverse class in your Styles

As you can see in the image shown, it is coming from the sp-bootstrap file which you cannot access. 

and this is how it would be declared n the bootstrap css

.navbar-inverse {

 background-color: $navbar-inverse-bg;

}

[Oleg]

SCSS allows to generate/compile CSS from many separate SCSS files. Typically one defines some SCSS variables in one file and use there in other file. One can overwrite the value of previously defined variable. Bootstrap contains many scss files, which will be merged and compiled to one CSS file - bootstrap.css. To be more exactly, one can find all standard SCSS variables used in Bootstrap 3.3.6 under _variables.scss. For example, the following two lines of _variables.scss (see here) contain

$navbar-inverse-bg:     #222 !default;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;

Another part of Bootstrap SCSS uses the variables to define CSS rules:

.navbar-inverse {
  background-color: $navbar-inverse-bg;
  border-color: $navbar-inverse-border;

see here.

One can define new SCSS variable (like $body-bg, $sp-body-bg, for example) or change the value of any variable defined in Bootstrap SCSS. If we examine La Jolla Theme we would find the following lines

$body-bg: #ffffff !default;
$navbar-inverse-bg: #293e40 !default;

The first line defines new variable $body-bg and the second line changes/redefines the value of $navbar-inverse-bg variable defined by Bootstrap. You will don't find definition of $navbar-inverse-border in La Jolla Theme. Thus, the value of $navbar-inverse-border will be calculated using the definition of $navbar-inverse-border in Bootstrap:

$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;

which means #152021 (see http://scg.ar-ch.org/ for example to calculate the value of darken function). As the result, one can examine sp-bootstrap.scss (https://<your_instance>.service-now.com/styles/scss/sp-bootstrap.scss?portal_id=81b75d3147032100ba13a5554ee4902b) and to find

.navbar-inverse {
    background-color: #293e40;
    border-color: #152021;
}

Now about the difference between $sp-body-bg and $body-bg. One can choose any name. It's just a name conversion to start variables defined for Service Portal from $sp-, but ServiceNow holds the name conversion not everywhere. Sometime the usage of the name conversion is more important. For example, Stock Header widget creates navigator bar of default Service Portal. It uses $sp-navbar-divider-color variable defined in La Jolla Theme as

$sp-navbar-divider-color: #5A7F71 !default;

I find the choice of the name here very good (I mean that the name starts with $sp-), because it makes for everyone clear, that $sp-navbar-divider-color is not a standard Bootstrap variable. It's just a custom variable defined in ServiceNow theme.