Service Portal SCSS Primer

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

SCSS variables

SCSS variables are a way to store information that you want to reuse throughout your style sheet. 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.

SCSS supports the follow data types:

Numbers (including units)
Strings (with quotes or without)
Colors (name, or names)
Booleans

Variables can also be arguments to or results from one of several available functions or mixins. During translation, the values of the variables are inserted into the output CSS document.

For example:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100%$font-stack;
  color: $primary-color;
}

For more information on Sass, see the Sass/SCSS reference.

SCSS functions

List of functions for Service Portal SCSS compiler.

RGB functions


Function	Description
rgb($red, $green, $blue)	Creates a Color from red, green, and blue values.
rgba($red, $green, $blue, $alpha)	Creates a Color from red, green, blue, and alpha values.
red($color)	Gets the red component of a color.
green($color)	Gets the green component of a color.
blue($color)	Gets the blue component of a color.
mix($color1, $color2, [$weight])	Mixes two colors together.

HSL functions


Function	Description	Availability
hsl($hue, $saturation, $lightness)	Creates a Color from hue, saturation, and lightness values.	Yes
hsla($hue, $saturation, $lightness, $alpha)	Creates a Color from hue, saturation, lightness, and alpha values.	Yes
hue($color)	Gets the hue component of a color.	Yes
saturation($color)	Gets the saturation component of a color.	Yes
lightness($color)	Gets the lightness component of a color.	Yes
adjust-hue($color, $degrees)	Changes the hue of a color.	Yes
lighten($color, $amount)	Makes a color lighter.	Yes
darken($color, $amount)	Makes a color darker.	Yes
saturate($color, $amount)	Makes a color more saturated.	Yes
desaturate($color, $amount)	Makes a color less saturated.	Yes
grayscale($color)	Converts a color to grayscale.	Yes
complement($color)	Returns the complement of a color.	No
invert($color)	Returns the inverse of a color.	No

Opacity functions


Function	Description	Availability
alpha($color)	Gets the alpha component (opacity) of a color.	Yes
opacity($color)	Gets the alpha component (opacity) of a color.	Yes
rgba($color, $alpha)	Changes the alpha component for a color.	Yes
opacify($color, $amount)	Makes a color more opaque.	No
fade-in($color, $amount)	Makes a color more opaque.	No
transparentize($color, $amount)	Makes a color more transparent.	No
fade-out($color, $amount)	Makes a color more transparent.	No

Other color functions


Function	Description	Availability
adjust-color()	Increases or decreases one or more components of a color.	Yes
scale-color()	Fluidly scales one or more properties of a color.	Yes
change-color()	Changes one or more properties of a color.	No
ie-hex-str()	Converts a color into the format understood by IE filters.	No

String functions


Function	Description	Availability
unquote($string)	Removes quotes from a string.	Yes
quote($string)	Adds quotes to a string.	Yes
str-length($string)	Returns the number of characters in a string.	No
str-insert($string, $insert, $index)	Inserts $insert into $string at $index.	No
str-index($string, $substring)	Returns the index of the first occurrence of $substring in $string.	No
str-slice($string, $start-at, [$end-at])	Extracts a substring from $string.	No
to-upper-case($string)	Converts a string to upper case.	No
to-lower-case($string)	Converts a string to lower case.	No

Number functions


Function	Description	Availability
percentage($number)	Converts a unitless number to a percentage.	Yes
round($number)	Rounds a number to the nearest whole number.	Yes
ceil($number)	Rounds a number up to the next whole number.	Yes
floor($number)	Rounds a number down to the previous whole number.	Yes
abs($number)	Returns the absolute value of a number.	Yes
min($numbers…)	Finds the minimum of several numbers.	Yes
max($numbers…)	Finds the maximum of several numbers.	Yes
random([$limit])	Returns a random number.	No

List functions

Lists in SCSS are immutable. All list functions return a new list rather than updating the existing list in-place.

All list functions work for maps as well, treating them as lists of pairs.


Function	Description
length($list)	Returns the length of a list.
nth($list, $n)	Returns a specific item in a list.
set-nth($list, $n, $value)	Replaces the nth item in a list.
join($list1, $list2)	Joins two lists into one.
append($list1, $val)	Appends a single value onto the end of a list.
zip($lists…)	Combines several lists into a single multidimensional list.
index($list, $value)	Returns the position of a value within a list.
list-separator($list)	Returns the separator of a list.

Adding custom functions

Scss @function my-calculation-function($some-number, $another-number){ @return $some-number + $another-number }

SCSS nesting

SCSS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

For example:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

The ul, li, and a selectors are nested inside the nav selector, which is a great way to organize your CSS and make it more readable. When the widget is rendered, the generated CSS looks something like the following code block:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

For more information on Sass, see the Sass/SCSS reference.

SCSS operators

SCSS has a handful of standard math operators like +, -, *, /, and %.

Use simple math to calculate widths for an aside & article. For example:

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

The generated CSS looks like:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

For more information on Sass, see the Sass/SCSS reference.

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

The following code block is an example for border-radius.

@mixinborder-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @includeborder-radius(10px); }

The generated CSS looks like:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

For more information on Sass, see the Sass/SCSS reference.

Contents