Utility Sass Mixins

Colorize the alert

alert-variant(backgroundColour, textColour)

Used in alert modifier classes to colorize the alert

@include alert-variant(orange, black);

Borders styling

bordered(borderRadius, padding, borderColour)

Add padding, border and border radius to element

Defaults: borderRadius: $border-radius; padding: spacing(x3); borderColour: $color-border

@include bordered();

//Override default values
@include bordered(10px, 30px, green);

Fill the star rating

rating-fill(maxStars)

Used in rating modifier to fill the star ratings

Defaults: maxStars: 6

@include rating-fill();

//Override default values
@include rating-fill(5);

Truncate

truncate(boundary)

Forces overly long lines of text to truncate

Defaults: boundary: null

@include truncate();

//Override default values
@include truncate(200px);

Convert value to REMs

rem(property, sizeValue)

Defaults: sizeValue: $font-size-base

@include rem(font-size, 16px);

Convert value to EMs

em(property, sizeValue)

@include em(font-size, 16px);

Font-size mixin

font-size(key, lineHeight, scale, relativeToParent)

Allows direct use of font-size map keys rather than specific values and converts px definitions to REM with respect to the base font-size.

@include font-size(mid);