Styles: Functions

Functions used in the SS&C CSS to manage complexity and provide a consistentexperience.

There are currently two custom functions in the SS&C CSS to help manage colors and manipulate the names. These functions must be included early in your SASS for many of the mixins and styles to work correctly.

Function: color($key)

This function overrides and extends the base Bootstrap color system. It allows for the use of custom color names in the CSS, and provides a fallback to the primary color if the color is not found.

Fetch a color from the palette

@function color($key) {
  $key: str-replace($key, "--");
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }
  @else {
    @return theme-color("primary");
  }
}

Function: str-replace($string, $search, $replace: "")

This function is a simple string replacement function for use in your SASS. It used in the above color function to remove the -- from the color name.

Replace a string with a given search

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }
  @return $string;
}