Other custom styling

Filename: _custom-styles.scss

In this file, we will add all customization code for components that can’t be done by overriding existing variables from the _variables.scss file. Instead, we will target the components using CSS class selectors and modify the styles using a mix of regular CSS and Sass code. Even though we can’t override existing variables, we can still use them as values for our CSS properties, which we will do for the two components in this section.

Alert

We want to add a thick border on the left side of the alert component with the border color inheriting the text color and the thickness being half the value of the $spacer variable:

part-2/chapter-8/website/scss/_custom-styles.scss line 1-4

// Customize the left border of the alert component
.alert {
  border-left: ($spacer * .5) solid;
}

The shorthand for border-left used in the preceding code is equal to the following:

border-left-width: $spacer * ...