Styles/SCSS inheritance

The following explains how to use the IO_Variables in your component

Inside every component you must import the io variables

@import "~@io/bootstrap/scss/imports/imports";

Note: The reference could change depending on where the directory of the component resides

This allows you to use all the variables inside your component.scss file

.my-class{
  color: $red
}

There is no need to use custom hex codes in your scss. All the colors should be refrenced from the IO_Style Guide. If a color is not available in the variables, please inform the platform team so that it can be addressed.

A list of all the Investec colors can be found here: https://platform.investec.com/story-book/

IMPORTANT

Do not include anything but variables, function declarations and other SASS features in the _io_variables file. If you include actual CSS, it will duplicate this CSS across every file you import the master into.